模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，都应当使用计算属性。
<div id="example">
<p>
original message : "{{message}}"
</p>
<p>
computed reversed message : "{{reverseMessage}}"
</p> </div> <script>
var vm = new Vue({
el:"#example",
data:{
message : "zxq"
},
computed : {
reverseMessage : function(){
return this.message.split('').reverse().join('');
}
}
});
</script>
同样的效果也可以通过在表达式中调用methods实现。
注：计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，计算属性才会重新求值。
如上示例，只有当message改变时，多次访问 reverseMessage 计算属性才会再次执行函数，否则会返回之前的结果。
而对比methods，总是会再次执行函数。
computed 和 watch
<div id="app0">
firstname : <input type="text" v-model="firstName"/><br/>
lastname : <input type="text" v-model="lastName"/>
<p>
my name is : {{fullName}}
</p>
</div>
① watch
var vm = new Vue({
el: '#app0',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
② computed
var vm = new Vue({
el: '#app0',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
相比之下，计算属性更为简洁
计算属性默认只有get方法，但在必要时也可以提供一个set方法
<div id="example">
firstname : <input type="text" v-model="firstName"/><br/>
lastname : <input type="text" v-model="lastName"/><br/>
my name is : <input v-model="fullName" /> </div> <script>
var vm = new Vue({
el:"#example",
data: {
firstName: 'zhu',
lastName: 'xingqing'
},
computed : {
fullName : {
get : function(){
return this.firstName + ' ' + this.lastName
},
set : function(newVal){
newfull = newVal.split(' ');
this.firstName = newfull[0];
this.lastName = newfull[1];
}
}
}
});
</script>