当前阅读教程:Vue.JS入门教程 > Vue.js 计算属性setter | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Vue.js 计算属性 computed vs methods | 下一篇: Vue.js 组件 Component |
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter 示例代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js 计算属性setter</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <p>{{ site }}</p> </div> <script> //Vue语句-开始 var vm = new Vue({ el: '#app', //app为前面div区块的id的值,通过"#"号绑定 data: { name: '淘宝网',//从初始化属性 url: 'http://www.taobao.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[names.length - 1] } } } })//Vue语句-结束 // 调用 setter, vm.name 和 vm.url 也会被对应更新 vm.site = '黄老师站点|http://www.8895.org'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url); </script> </body> </html> 效果图从实例运行结果看在运行 vm.site = '黄老师站点|http://www.8895.org'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。 |
|
上一篇: Vue.js 计算属性 computed vs methods | 下一篇: Vue.js 组件 Component |