前面介绍了计算属性的基本用法，也提到过，计算属性默认只有 getter，如果我们需要 setter 方法怎么办呢？Vue.js 允许我们手动指定 getter 和 setter 方法，例如：
var app = new Vue({
el: "#app",
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
computed: {
fullName: {
// getter 方法
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter 方法，参数 newValue 为新的值
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
});你可以打开浏览器的控制台，修改例子中的 app.fullName = 'John Doe' 时，setter 会被调用，app.firstName 和 app.lastName 也会相应地被更新。
<div id="app">
<div id="demo">{{ fullName }}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
});
</script>运行效果图：
川公网安备51010802032098