初识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 的值的目的,这就是我们的计算属性。