在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 a= {{a}},
11 b={{b}},
12 c={{c}}
13 </div>
14 <script>
15 var vm=new Vue({
16 el: '#app',
17 data: {
18 a:1
19 },
20 computed:{
21 b:function(){
22 return this.a*2015
23 },
24 c:function(){
25 return this.b+this.a
26 }
27 }
28 });
29 vm.a=2;
30 </script>
31 </body>
32 </html>
在线：
https://jsfiddle.net/miloer/veL2bkbf/1/
computed
- 类型：
Object - 详细：实例计算属性。getter 和 setter 的
this自动地绑定到实例。 - 示例：
1 var vm = new Vue({ 2 data: { a: 1 }, 3 computed: { 4 // 仅读取，值只须为函数 5 aDouble: function () { 6 return this.a * 2 7 }, 8 // 读取和设置 9 aPlus: { 10 get: function () { 11 return this.a + 1 12 }, 13 set: function (v) { 14 this.a = v - 1 15 } 16 } 17 } 18 }) 19 vm.aPlus // -> 2 20 vm.aPlus = 3 21 vm.a // -> 2 22 vm.aDouble // -> 4 - 另见：