Vue.js第二章
陈斌
2.5 计算属性和监听器
2.5.1computed计算属性
案例代码：
<body>
2 <div id="app">
3 数学：<input type="text" v-model="mathScore" >
4 英语：<input type="text" v-model="englishScore">
5 总分(方法-单向)：<input type="text" v-model="sumScore()">
6 总分(计算属性-单向)：<input type="text" v-model="sumScore1">
7 </div>
8 <script src="./node_modules/vue/dist/vue.js"></script>
9 <script type="text/javascript">
10 var vm = new Vue({
11 el: '#app',
12 data: {
13 mathScore: 80,
14 englishScore: 90,
15 },
16 methods: { //不要少了s
17 sumScore: function () {
18 //在控制台输入 vm.sumScore() 每次都会被调用
19 console.info('sumScore被调用')
20 // `this` 指向当前 vm 实例， 减 0 是为了字符串转为数字运算
21 return (this.mathScore-0) + (this.englishScore-0)
22 }
23 },
24 computed: { //计算属性
25 sumScore1 : function () {
26 //在控制台输入vm.sumScore1 不会被重新调用,说明计算属性有缓存
27 console.info('sumScore1被调用')
28 return (this.mathScore - 0) + (this.englishScore -0)
29 }
30 }
31 })
32 </script>
33 </body>
2.5.2 计算属性（双向绑定）
案例代码：
<body>
<div id="app">
数学：<input type="text" v-model="mathScore" ><br>
英语：<input type="text" v-model="englishScore"><br>
总分(方法-单向)：<input type="text" v-model="sumScore()"><br>
总分(计算属性-单向)：<input type="text" v-model="sumScore1"><br>
总分(计算属性-双向)：<input type="text" v-model="sumScore2"><br>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
mathScore: 80,
englishScore: 90,
},
methods: { //不要少了s
sumScore: function () {
//在控制台输入 vm.sumScore() 每次都会被调用
console.info('sumScore被调用')
// `this` 指向当前 vm 实例， 减 0 是为了字符串转为数字运算
return (this.mathScore - 0) + (this.englishScore -0)
}
},
computed: {
//计算属性 默认 getter 只支持单向绑定
sumScore1 : function () {
//在控制台输入vm.sumScore1 不会被重新调用,说明计算属性有缓存
console.info('sumScore1被调用')
return (this.mathScore - 0) + (this.englishScore -0)
},
//指定 getter/setter 双向绑定
sumScore2 : {
get: function () {
console.info('sumScore2被调用')
return (this.mathScore-0) + (this.englishScore-0)
},
set: function (newValue) {//value为更新后的值
// 被调用则更新了sumScore2，然后将数学和英语更新为平均分
var avgScore = newValue / 2
this.mathScore = avgScore
this.englishScore = avgScore
}
}
}
})
</script>
</body>
2.5.3 watch监听器
案例代码：
<body>
<div id="app">
数学：<input type="text" v-model="mathScore" ><br>
英语：<input type="text" v-model="englishScore"><br>
总分(方法-单向)：<input type="text" v-model="sumScore()"><br>
总分(计算属性-单向)：<input type="text" v-model="sumScore1"><br>
总分(计算属性-双向)：<input type="text" v-model="sumScore2"><br>
总分(监听器)：<input type="text" v-model="sumScore3"><br>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
mathScore: 80,
englishScore: 90,
sumScore3: 170
},
methods: { //不要少了s
sumScore: function () {
//在控制台输入 vm.sumScore() 每次都会被调用
console.log('sumScore被调用')
// `this` 指向当前 vm 实例， 减 0 是为了字符串转为数字运算
return (this.mathScore - 0) + (this.englishScore -0)
}
},
// 计算属性
computed: {
// 默认 getter 只支持单向绑定
sumScore1 : function () {
//在控制台输入 vm.sumScore1 不会被重新调用 ,说明计算属性有缓存
console.log('sumScore1被调用')
return (this.mathScore - 0) + (this.englishScore -0)
},
//指定 getter/setter 双向绑定
sumScore2 : {
get: function () {
console.log('sumScore2被调用')
return (this.mathScore-0) + (this.englishScore-0)
},
set: function (newValue) {//value为更新后的值
// 被调用则更新了sumScore2，然后将数学和英语更新为平均分
var avgScore = newValue / 2
this.mathScore = avgScore
this.englishScore = avgScore
}
}
}//,
//监听器方式1：watch选项watch : {
//当数学修改后，更新总分sumScore3 mathScore : function (newValue, oldValue) {
//newValue 就是新输入的数学得分
//this.sumScore3 = (newValue-0) + (this.englishScore-0)
//}
//}
})
//监听器方式2：通过vm对象调用
//第1个参数为监听的属性名，第2个回调函数
vm.$watch('englishScore', function (newValue) {
//newValue 就是新输入的英语得分
this.sumScore3 = (newValue-0) + (this.mathScore-0)
})
</script>
</body>
类似资料：