vue.js计算属性(getter | setter)
2018-03-25 17:31
746 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Vue.js --> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> 姓名: {{ fullName }} </div> </body> </html> <script> var app = new Vue({ el:'#app', data:{ firstName:'Jack', lastName:'Green' }, //所有的计算属性都以函数的形式写在vue实例内的computed选项内,最终返回计算的结果 //每一个计算属性都包含一个getter和一个setter,我们的上个实例都是计算属性的默认用法,只是利用了getter来获取,在你需要时,也可以提供一个setter函数,当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter函数,执行一些自定义操作 computed:{ fullName:{ //getter,用于读取 get:function () { return this.firstName + ' ' + this.lastName; }, set:function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } //绝大多数情况下,我们只会用默认的getter方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter和setter都声明 } } }) </script>
相关文章推荐
- vue.js计算属性setter
- Vue.js 学习(4) -- 计算属性和Watchers
- get set操作对象属性(getter,setter)js
- Vue.js-05:第五章 - 计算属性与监听器
- vue.js计算属性(computed)
- vue.js计算属性computed用法实例分析
- vuejs教程3-计算属性
- Vue.js 计算属性
- vue.js(5)-计算属性和观察者
- 浅谈 JS 对象添加 getter与 setter 的5种方法以及如何让对象属性不可配置或枚举
- Vue.js第三天学习笔记(计算属性computed)
- 【js学习笔记-035】--属性getter和setter
- vue.js计算属性和观察者
- vue.js使用之计算属性与方法返回的差别
- Vue.js 计算属性
- Vue.js—计算属性
- vue.js入门教程之计算属性
- Vue.js学习系列(二十九)-- 计算属性(三)
- Vue.js 计算属性的秘密
- Vuejs全家桶系列(四)---计算属性