初识vue.js，我的学习之路（二）
Vue计算属性
vue在花括号之内也是可以写逻辑代码的，例：
<div id="app"> {{ message.split('').reverse().join('') }} {{ message.split('').reverse().join('') }} {{ message.split('').reverse().join('') }} {{ message.split('').reverse().join('') }} {{ message.split('').reverse().join('') }} </div> <script src="vue.js"></script> <script> new Vue({ el:"#app", data:{ message:"这是一个message" } }) </script>
花括号内放入大量逻辑代码就会过重且难以维护，所以这时便要用到我们的计算属性 computed。
1 <div id="app"> 2 3 <p>{{message}}</p> 4 <p>{{b}}</p> 5 6 </div> 7 <script src="vue.js"></script> 8 <script> 9 //基本写法，默认走的是get 10 var vm = new Vue({ 11 el:"#app", 12 data:{ 13 14 message:"这是一个message" 15 16 }, 17 computed:{ 18 19 b:function(){ //要把b看做一个属性 20 21 return this.message; 22 23 } 24 } 25 }); 26 console.log(vm.message); 27 console.log(vm.b); 28 </script>
注意的是在这里面要把b看做是一个属性，而不是一个函数，上面这种写法默认走的是get，下面还有一种完整写法，完整写法会用到 get 和 set 两个方法，读get，写set。
var vm = new Vue({ el:"#app", data:{ a:8 }, computed:{ b:{ get:function(){ return this.a+2; }, set:function(val){ this.a = val; console.log(val) } } } }); window.onclick = function(){ vm.b = 200; }
get 只能读到 a 的值却无法修改，通过上面的代码我们可以看到，使用了 set，给 set 一个 val 的参数，而这个 val 就是 全局的 new 出来的 vue 的属性 b 的值，this.a=val ,也就是this.a=200，所以当触发了窗口的 onclick 事件后，页面会输出出 200 和202，通过这么一个方法我们达到了修改 a 的值的目的，这就是我们的计算属性。
