当某些属性与其它属性通过算法联动时,就可以将这些属性定义为计算属性,示例如下:
<body>
计算属性
<div id="app">
<input v-model="a" />
<div>
{{b}}
</div>
</div>
<script src="/lib/vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data : {
a:1
},
computed: {
b() {
return this.a * 2;
}
}
})
</script>
</body>
如果遇到复杂的模板算法,可以考虑用计算属性进行替代。计算属性也可以调用计算属性,比如增加:
c() {
return this.b * 2;
}
并且定义的顺序没有关系。但是不能循环调用,否则会导致堆栈溢出。
网友评论