vue的computed计算属性学习
2017-09-07 19:55
981 查看
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。这时候需要使用到vue的计算属性computed。
文件目录结构如下:利用vue脚手架创建
这里实现将一个字符串进行翻转的功能:
其中HTML是负责显示,reverse.vue文件是自定义的vue模板,main.js文件是我们的启动入口文件。
需要注意的是:data()方法不能改为data属性。其中的区别请参看这里:
Vue2 实例中的 data 属性三种写法与作用
data()方法类似于Java中的setter方法,为其中的message属性赋值
在reverse模板中我们声明了一个计算属性
getter 函数:
文件目录结构如下:利用vue脚手架创建
这里实现将一个字符串进行翻转的功能:
其中HTML是负责显示,reverse.vue文件是自定义的vue模板,main.js文件是我们的启动入口文件。
需要注意的是:data()方法不能改为data属性。其中的区别请参看这里:
Vue2 实例中的 data 属性三种写法与作用
data()方法类似于Java中的setter方法,为其中的message属性赋值在reverse模板中我们声明了一个计算属性
reversedMessage。我们提供的函数将用作属性
vm.reversedMessage的
getter 函数:
相关文章推荐
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js第三天学习笔记(计算属性computed)
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- Vue.js第三天学习笔记(计算属性computed)
- Vue.js学习 Item5 -- 计算属性computed与$watch
- vue中计算属性(computed)、methods和watched之间的区别
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- vue-computed计算属性
- Vue计算属性(computed)、methods、watched三者区别
- Vue:计算属性computed
- vue学习笔记 计算属性(四)
- vue计算属性computed和methods的区别
- vue的计算属性(computed)、methods、watched三者区别
- vue-计算属性computed
- 3.vue入门基础学习笔记-计算属性computed
- 学习vue.js计算属性
- vue计算属性computed
- Vue.js 学习4 计算属性
- Vue.js基本规则提炼总结及计算属性学习