VUE-计算属性
模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的。
通过上一章的介绍,我们己经可以搭建出一个简单的 Vue 应用,在模板中双向绑定 些数据
或表达式了。但是表达式如果过长,或逻辑更为复杂时,就会变得雕肿甚至难以阅读和维护,比如:
<div>
{{ text.split ( ’,’ ).reverse().join (’,’)}}
</div>
computed
computed
类型: Object
所属对象: ComponentOptions
参考:
https://cn.vuejs.org/v2/api/#computed
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
示例:
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4

新鲜刺激的东西永远都有,玩之前掂量掂量自己几斤几两
浙公网安备 33010602011771号