Vue.js学习系列（二十九）-- 计算属性（三）

3.computed setter

{{site}}

var vm = new Vue({

el: '#app',

data: {

name: 'Google',

url: 'http://www.google.com'

},

computed: {

site: {

// getter

get: function () {

return this.name + ' ' + this.url

},

// setter

set: function (newValue) {

var names = newValue.split(' ')

this.name = names[0]

this.url = names[1]

}

}

}

})

// 调用setter，vm.name 和 vm.url 也会被对应更新

vm.site = '51code http://www.51code.com';

document.write('name: ' + vm.name);

document.write('
');

document.write('url: ' + vm.url);

运行结果：

从实例运行结果看在运行vm.site = '51code http://www.51code.com';时，setter就会被调用，同时vm.name和vm.url也会被对应更新。

在使用计算属性computer，在必要时可以设置setter。