012_Vue计算属性

1. 为何需要计算属性?

1.1. 表达式的计算逻辑可能会比较复杂, 使用计算属性可以使模板内容更加简洁。

1.2. 计算属性用法

computed: {reverseString: function(){return this.msg.split('').reverse().join('');}
}

1.3. 计算属性有缓存。

2. 计算属性例子

2.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>计算属性</title></head><body><div id="app"><div>{{msg}}</div><hr /><div>计算属性:</div><div>{{reverseString}}</div><div>{{reverseString}}</div><hr /><div>方法:</div><div>{{reverseMethod()}}</div><div>{{reverseMethod()}}</div><hr /><div>求和:</div><div>{{sum}}</div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {msg: 'Nihao',num: 100},methods: {reverseMethod: function(){console.log("方法没有缓存");return this.msg.split('').reverse().join('');}},computed: {reverseString: function(){console.log("计算属性有缓存");return this.msg.split('').reverse().join('');},sum: function(){// 比较耗时的操作可以使用计算属性var total = 0;for(var i = 0; i <= this.num; i++){total += i;}return total;}}});</script></body>
</html>

2.2. 效果图

012_Vue计算属性相关推荐

vue从创建到完整的饿了么（5）v-for，v-bind与计算属性
说明 1.上一章--Home.vue及vue-resource使用 2.cangdu大神的项目源码地址--Github地址 3.接口地址--Github地址 4.UI框架用的是--Mint UI 5. ...
Vue3 计算属性的特性
computed:里面的方法仅当依赖的值发生变动时,才会重新进行计算这样一来解决的是性能问题而methods里面的方法,哪怕无关值发生变动,也会重新进行计算下面是两组对比 1-通过distan ...
Vue 第一天: 计算属性和观察者
计算属性和观察者计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
《Ember.js实战》——2.3　计算属性
本节书摘来自异步社区<Ember.js实战>一书中的第2章,第2.3节,作者:[挪]Joachim Haagen Skeie(乔基姆•哈根•斯基)著,更多章节内容可以访问云栖社区" ...
Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等
一.类与结构体两者在Swift中差不了多少了类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法 ...
003-读书笔记-Vue官网计算属性与监听器
1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性,和 data 方法中返回的对象中的属性是等同的存在.通常来说,计算属性可以简单理解: 计算属性其实就是 Vue 实例的一个属性计 ...
vue 带全选和多选的表格怎么写_vue中使用计算属性巧妙的实现多选框的“全选”...
接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...
Vue计算属性和监听属性
一.计算属性计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app">{{ messa ...
vue 02-上计算属性、样式的操作，指令（含自定义,全局和局部）
计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行典型案例todolistcomputed:{计算属性: function(){return 返回值} 使用: {{计算属性}}}与metho ...

012_Vue计算属性

012_Vue计算属性相关推荐

最新文章

热门文章