[TOC] ## 1.计算属性 >[danger]计算属性有个缓存机制,当它计算的值不发生改变时,计算属性不会再次触发。 ~~~ <div id="app"> <div>{{sum}}</div> </div> ~~~ ~~~ new Vue({ el:"#app", data:{ num1:1, num2:2 }, /* 计算属性 */ computed:{ sum(){ return this.num1+this.num2 } } }) ~~~ ## 2.方法 ~~~ <div id="app"> <div>{{sum()}}</div> </div> <script> var vm =new Vue({ el:"#app", data:{ num1:1, num2:2 }, methods:{ sum:function(){ return this.num1+this.num2 } } }) </script> ~~~ ## 3.watch侦听器 ~~~ <div id="app"> <div>{{sum}}</div> </div> ~~~ ~~~ var vm =new Vue({ el:"#app", data:{ num1:1, num2:2, sum:3 }, watch:{ /* 侦听num1的改变 */ num1:function(){ this.sum = this.num1+this.num2 } } }) ~~~