- 计算属性
-
<div id="root"> 姓:<input v-model="firstName"/> 名:<input v-model="lastName"/> <div>{{fullName}}</div> </div> <script> new Vue({ el:"#root", data{ firstName='', lastName='' }, computed{ fullName:function(){ return this.firstName +' '+ this.lastName } } }) </script>
computed:指的是一个属性通过其他属性计算而来
好处:如果firstName和lastName没改变,每次在使用fullName时,会使用上一次计算结果的缓存结果。
-
侦听器
侦听器是用来监听某一个数据的变化。
定义侦听器用 watch:{ }
例如现在有一个需求,需要显示改变次数,也就是当对姓或者名进行变更时,计数加1
这时候定义一个count初始值为0,每次fullName改变,侦听器会对count进行加1操作。
<div id="root"> 姓:<input v-model="firstName"/> 名:<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data{ firstName='', lastName='', count=0 }, computed{ fullName:function(){ return this.firstName +' '+ this.lastName } }, watch:{ fullName:function(){ this.count++ } } }) </script>