像绑定普通属性一样在模板中绑定计算属性。计算属性的值依赖于绑定的属性,计算属性默认getter方法,所以依赖的属性的值发生改变时会运行计算属性的函数重新赋值,如果依赖的值没有发生改变时,使用计算属性时不会再次运行函数而是使用缓存。
<div id="demo">
<p>fullName:{{fullName}}</p>
<p>firstName:{{firstName}}</p>
<input v-model="firstName" type="text" />
</div>
<script>
var demo=new Vue({
el:"#demo",
data:{
firstName:"Foo",
lastName:"Bar",
//fullName:"Foo Bar",
},
/*这是使用监听器的办法
watch:{
firstName:function(val){
this.fullName=val+" "+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+" "+val;
}
}
*/
//这是使用计算属性的办法
//计算属性有代码重复率比用监听的办法
computed:{
fullName:{
//当改变依赖的值时会改变计算属性的值,但光有get方法改变计算属性的值依赖属性不会改变
get:function(){
return this.firstName+" "+this.lastName;
},
//设置了set方法后,改变计算属性,依赖属性也会跟着改变
set:function(newValue){
var name=newValue.split(' ');
this.firstName=name[0];
this.lastName=name[name.length-1];
}
}
}
});
</script>