标签：
在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 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/
Objectthis 自动地绑定到实例。 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
标签：
原文地址：http://www.cnblogs.com/moustache/p/5445647.html
