您的位置:首页 > 产品设计 > UI/UE

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模板中我们声明了一个计算属性 
reversedMessage
。我们提供的函数将用作属性
vm.reversedMessage
 的
getter 函数:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: