<div id="app">
<div @click="alert">{{fullName}}</div>
</div>
var app = new Vue({
el: "#app",
data: {
firstName: "zhang",
lastName: "yuanghao",
},
methods: {
alert: function () {
this.fullName="hu yang";
}
},
computed: {
fullName: {
get: function () {
return this.firstName + "-" + this.lastName;
},
set: function (value) {
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
return this.firstName + "-" + this.lastName;
}
}
}
})
get是在用读取计算属性fullName的时候使用的,
set是在fullName被重新设置后使用的
当firstName发生改变,
计算属性中的fullName依赖着firstName会重新计算,
在fullName重新后页面会发生改变.