所谓的计算属性,就是拿data里的数据,经过计算得出的结果。属性和计算属性是分开的。
- 实现
<div id="app">
firstName:<input v-model="fristName"/> <br/>
lastName:<input v-model="lastName"/> <br/>
fullName:<input v-model="fullName"/>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
fristName:"",
lastName:"",
},
computed:{
fullName:{
get(){
return this.fristName+"-"+this.lastName;
},
set(newVal,oldVal){
const tmp =this.fullName.splice("-");
this.fristName=tmp[0];
this.lastName=tmp[1];
}
}
}
})
</script>
- 计算属性可以作为属性在模板语法中使用,本质上也有
vm
对象进行代理。- 当第一次读取计算属性时,会调用
get
方法,当修改计算属性时,对调用set
的方法。- 当参与计算的属性发生改变时,会重新调用一次get方法生成新值。
- 计算属性具有缓存特性,当第一次通过
get
方法生成值时,只要参与计算的属性不在发生改变,再一次读取计算属性时就不会重新调用get方法生成值。- 如果不需要set方法,可以省略不写,直接配置一个方法为get方法。
computed:{ fullName(){ return this.fristName+"-"+this.lastName; } }