计算属性关键词:computed
计算属性在处理一些复杂逻辑时是很有用的。
示例1:
<div id="app"> {{message.split('').reverse().join('')}} </div>
以上代码中模板变的很复杂起来,也不容易看懂理解
示例2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <p>初始字符串: {{ message }}</p> <p>反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script> </body> </html>
第二个例子中声明了一个计算属性reversedMessage
vm.reversedMessage 与 vm.message相关联,在 vm.message 发生改变vm.reversedMessage也会更新。
computed vs methods
我们可以使用methods来代替computed,效果上它们都是一样的,都是computed是基于它的依赖缓存,只有相关依赖发生改变时才会重新赋值。而使用methods,在重新渲染的时候,函数总会重新调用执行。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="new.vue.js"></script> </head> <body> <div id="app"> <p>你的firstName:{{firstName}}</p> <p>你的lastName:{{lastName}}</p> <p>你的fullName是从计算属性中得到的:{{fullName}}</p> <p>你的fullName是从计算属性中得到的:{{getFullName()}}</p> </div> <script> const vm = new Vue({ el: '#app', data() { return { firstName:'张', lastName:'三' } }, methods:{ getFullName(){ return this.firstName + this.lastName } }, computed:{ fullName(){ return this.firstName + this.lastName } } }) </script> </body> </html>
运行显示效果:
getter和setter
1. getter
通过getter我们可以获取对象中相关属性的值。我们可以理解为我们是定义了一个伪属性,我们读取这个伪属性的值时,它会按照我们定义好的规则返回对象的相关属性的值。
2. setter
通过setter我们可以修改对象中的相关属性,同样我们也可以理解为我们定义了一个伪属性,当我们修改这个伪属性的值时,它会按照我们定义好的规则修改对象的相关属性。
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model="firstName" /> <input type="text" v-model="lastName" /> <input type="text" v-model="fullName" /> <!-- v-model实现数据的双向绑定 --> </div> <script> const vm = new Vue({ el: '#app', data() { return { firstName: 'zhang', lastName: 'san' } }, computed: { //计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的 /* fullName(){ return this.firstName + this.lastName } */ fullName: { get: function() { return this.firstName + ',' + this.lastName }, set: function(val) { var list = val.split(',') console.log(list); this.firstName = list[0] this.lastName = list[1] } } } }) </script> </body> </html>
运行显示效果: