本文通过两个示例介绍了Vue.js中计算属性和侦听器的基本用法。第一个示例展示了如何使用计算属性来组合输入框中的两个字符串。第二个示例则演示了如何利用侦听器在姓名变化时更新计数。
计算属性
<body>
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div >{{fullName}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName:"",
lastName:""
},
// 计算属性
computed: {
fullName: function() {
return this.firstName+ '' + this.lastName
}
}
})
</script>
</body>
侦听器
<body>
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div >{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName:"",
lastName:"",
count: 0
},
// 计算属性
computed: {
fullName: function() {
return this.firstName + '' + this.lastName
}
},
watch: {
// firstName: function () {
// this.count++
// },
// lastName: function () {
// this.count++
// },
//简写
fullName: function() {
this.count++
}
}
})
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
