在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
</head>
<body>
<div id="app">
a= {{a}},
b={{b}},
c={{c}}
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
a:1
},
computed:{
b:function(){
return this.a*2015
},
c:function(){
return this.b+this.a
}
}
});
vm.a=2;
</script>
</body>
</html>
在线：
https://jsfiddle.net/miloer/veL2bkbf/1/
computed
-
类型：
Object -
详细：实例计算属性。getter 和 setter 的
this自动地绑定到实例。 -
示例：
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 - 另见：