计算的 setter
只要计算所依赖的任何数据发生变化,计算属性就会自动重新计算。但是,如果需要手动更改计算属性,Vue 允许你创建一个 setter 方法来执行此操作:
模板 (来自上面的基本示例):
<div id="example">
a={{ a }}, b={{ b }}
</div>
使用 Javascript:
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
b: {
// getter
get: function () {
return this.a + 1
},
// setter
set: function (newValue) {
this.a = newValue - 1
}
}
}
你现在可以调用 getter 或 setter:
console.log(vm.b) // -> 2
vm.b = 4 // (setter)
console.log(vm.b) // -> 4
console.log(vm.a) // -> 3
vm.b = 4
将调用 setter,并将 this.a 设置为 3; 通过扩展,vm.b 将评估为 4。