计算属性set/get
-
计算属性 (单向)
在computed属性对象中定义计算属性的方法,在页面使用{{方法名}}来显示计算的结果
-
监听属性 (单向)
通过vm对象的$watch()或watch配置来监听指定的属性,当属性变化时,回调函数自动调用,在函数内部进行计算。
-
计算属性高级 (双向)
通过geter/setter实现对属性数据的显示和监视,计算属性存在缓存,多次读取只执行一次getter计算。
const vm = new Vue({
el: "#demo",
data: {
firstName: "A",
lastName: "B",
fullName2: "A-B"
},
computed: {
fullName1() {
return this.firstName + "-" + this.lastName;
},
fullName3: {
// 回调函数:当读取当前属性值,根据相关数据变化 计算并返回当前属性值
get() {
return this.firstName + "-" + this.lastName;
},
// 回调函数: 监听属性值发生改变时回调,更新相关的属性数据
set(value) { //value 就是fullName3最新值
let name = value.split("-");
this.firstName = name[0];
this.lastName = name[1];
}
}
},
watch: {
firstName(newValue, oldValue) {
this.fullName2 = newValue + "-" + this.lastName;
},
lastName(newValue, oldValue) {
this.fullName2 = this.firstName + "-" + newValue;
}
}
})