Vue学习之computed 与 method
来源:互联网 发布:浙江省人口数据 编辑:程序博客网 时间:2024/06/06 23:18
前台某个数据是经过计算得出后再渲染在页面上,可以通过vue的computed或 定义method 实现
例如:
<p>{{fullName}}</p>
new Vue({ el:"p", data:{ firstName:"foo", lastName:"bar", fullName:'' }fullName = firstName + lastName,并且后台数据firstName ,lastName发生变化时,前台要实时渲染
computed实现:
computed:{ getFullName:function() { return this.firstName+" "+this.lastName }}对应前台修改为:
<p>{{getFullName}}</p>
methods:{ getFullName:function(){ return this.firstName+" " this.lastName}}
对应的前台修改为:
<p>{{getFullName()}}</p>
看上去好像没什么区别,我们来看看官网的说法
很清楚,就是用method方法时,不管firstName 和 laseName 有没有发生变化 getFullName 都会执行,如果是用计算属性computed,数据未发生变化时,返回值实际上是上次的缓存,不会重新计算
我们可以试验一下
修改computed代码如下
控制台:
控制台只打印了一次 computed 说明getFullName 只计算了一次
再看看methode方式:
控制台;
可以看到,methode打印了两次,说明计算了两次
总结: 当某个需要通过逻辑计算得到且在前台多处用到,应该使用vue的computed
阅读全文
1 0
- Vue学习之computed 与 method
- Vue学习之computed
- Vue method与computed的区别
- Vue method与computed的区别
- VUE之watch与computed
- Vue学习-Computed属性
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js之计算属性computed与$watch
- vue computed 与 watch 区别
- Vue之计算属性Computed
- vue--computed
- vue的computed计算属性学习
- vue-计算属性computed
- Vue:计算属性computed
- vue基础--computed属性
- Vue.js computed vs Methods
- 浅谈vue.js的computed
- POJ
- Mysql基础知识
- python常用语法
- Linux之lsof命令
- LRU最近最久未使用页面置换算法
- Vue学习之computed 与 method
- 第二十篇 jQuery 初步学习2
- 六大设计原则详解(3)-依赖倒置原则
- ORACLE-SQL编写规范(详细解释)
- Java技术——Java泛型详解
- 前中遍历创建二叉树
- Python 3爬虫网易云(四)—— 正则表达式上篇之匹配法则
- Ubuntu截图快捷键设置
- SCAN扫描算法