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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容