【Vue.js】- 计算属性
2017-06-20 13:53
585 查看
计算属性在处理一些复杂逻辑时是很有用的。
模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性:computed。
实例1:反转字符串
实例1中模板复杂,不好理解,现在我们采用计算属性的方式
声明一个reversalMessage,提供的函数将用作属性 vue.reversedMessage 的 getter 。
实例2:使用计算属性
computed与methods的区别:
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可
4000
以使用 methods 属性。
模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性:computed。
实例1:反转字符串
<html lang="en"> <head> <meta charset="utf-8"> <title>hellodemo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> </style> </head> <body> <!--文本--> <div id="app"> <p>{{ message }}</p> </div> <!--反转字符串reversal--> <div id="reversal"> {{ message.split('').reverse().join('') }} </div> <!--属性--> <script> new Vue({ el:'#reversal', data:{ message:'reversal', } }) </script> </body> </html>
实例1中模板复杂,不好理解,现在我们采用计算属性的方式
声明一个reversalMessage,提供的函数将用作属性 vue.reversedMessage 的 getter 。
实例2:使用计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hellodemo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> </style> </head> <body> <!--反转字符串reversal--> <div id="reversal"> <p>原始字符串:{{ message }}</p> <p>计算后反转的字符串:{{reversalMessage}}</p> </div> <!--属性--> <script> var vue = new Vue({ el:'#reversal', data:{ message:'reversal', }, computed:{ //计算属性的getter方法 reversalMessage:function () { //this指向Vue的实例 return this.message.split('').reverse().join('') } } }) </script> </body> </html>
computed与methods的区别:
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可
4000
以使用 methods 属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hellodemo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> </style> </head> <body> <!--反转字符串reversal--> <div id="reversal"> <p>原始字符串:{{ message }}</p> <p>计算后反转后的字符串:{{reversalMessage}}</p> <p>使用方法后反转字符串:{{reversalMethodMessage()}}</p> </div> <!--属性--> <script> new Vue({ el:'#reversal', data:{ message:'reversal', }, computed:{ //计算属性的getter方法 reversalMessage:function () { //this指向Vue的实例 return this.message.split('').reverse().join('') } }, methods:{ reversalMethodMessage:function () { return this.message.split('').reverse().join('') } }, }) </script> </body> </html> 实例3 computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hellodemo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> </style> </head> <body> <!--computed setter--> <div id="setter"> {{setter}} </div> </div> <!--属性--> <script> var vue = new Vue({ el:'#setter', data:{ name:'hxl', age:'20', }, computed:{ setter:{ //getter get:function () { return this.name + ',' + this.age }, //setter set:function (newValue) { var values = newValue.split(',') this.name = values[0] this.age = values[values.length-1] } } } }) // 调用 setter, vue.name 和 vue.url 也会被对应更新 vue.setter = 'hxl,25' document.write('name: ' + vue.name); document.write('<br>'); document.write('age: ' + vue.age); </script> </body> </html>
相关文章推荐
- Vue.js第三天学习笔记(计算属性computed)
- Vuejs——(3)计算属性,样式和类绑定
- Vue.js 学习(4) -- 计算属性和Watchers
- Vue.js教程之计算属性
- vue.js 计算属性$watch
- 学习vue.js计算属性
- Vue.js 计算属性
- vue.js计算属性setter
- Vue.js的计算属性
- Vue.js 官方文档摘记 计算属性
- Vue.js基本规则提炼总结及计算属性学习
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习之计算属性
- Vue.js 学习4 计算属性
- vue.js入门教程之计算属性
- vuejs教程3-计算属性
- Vue.js-----轻量高效的MVVM框架(五、计算属性)
- Vue.js计算属性
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch