计算属性:
当对data中的数据进行计算时,使用computed:属性进行计算。
该属性将计算属性对应为一个函数,返回计算后的新数据。
<body>
<div id="root">
firstName:<input v-model="firstName"/>
lastName:<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>
</body>
显示结果:
当参与计算的属性未发生改变时,计算结果会直接使用计算好的缓存值,而不用重新计算。
侦听器
作用:监听某些数据的变化
使用watch属性,同样使用函数
<body>
<div id="root">
firstName:<input v-model="firstName"/>
lastName:<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>
</body>
实现效果:可以计算数据更改的次数。