Vue.js的计算属性
2018-01-14 15:45
507 查看
计算属性关键词:computed
计算属性用途:用来处理一些复杂逻辑问题。
字符串反转问题相信很多人遇到过吧,我们可以用计算属性来演示一下
而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
个人觉得computed属性好用一点,当然不存在缓存问题的话,method方法也可以用。
computed 默认属性只有getter,需要时可以创建setter
计算属性用途:用来处理一些复杂逻辑问题。
字符串反转问题相信很多人遇到过吧,我们可以用计算属性来演示一下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 计算属性</title> <script src="vue.js"></script> </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>vm.reverseMessage 依赖于vm.message,当vm.message,vm.reverse.message也随之更新。
computed vs methods
效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }
个人觉得computed属性好用一点,当然不存在缓存问题的话,method方法也可以用。
computed 默认属性只有getter,需要时可以创建setter
<div id="app"> <p>{{ site }}</p> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el:'#app', data:{ name:'haha', age:20 }, computed:{ site:{ //getter get:function(){ return this.name + '今年' +this.age + '岁' }, //setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter, vm.name 和 vm.url 也会被对应更新 vm.site = 'ww 10';在运行vm.site = 'ww 10'时,setter会被调用,vm.name和vm.age也会相应的更新。
相关文章推荐
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js计算属性
- vue.js使用之计算属性与方法返回的差别
- Vue.js的计算属性
- Vue.js第三天学习笔记(计算属性computed)
- vue.js(5)-计算属性和观察者
- Vue.js计算属性computed与watch(5)
- Vue.js 学习4 计算属性
- Vue.js总结学习(指令、计算属性、数据绑定)
- vue.js计算属性
- vue.js计算属性和观察者
- Vue.js 计算属性的秘密
- Vue.js笔记-计算属性 class与style绑定
- vue.js 计算属性$watch
- vue.js计算属性computed用法实例分析
- vue.js计算属性(computed)
- Vue.js-----轻量高效的MVVM框架(五、计算属性)
- Vue.js-05:第五章 - 计算属性与监听器
- Vue.js第三天学习笔记(计算属性computed)
- Vue.js系列之四计算属性和观察者