Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中
methods
与computed
这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~);
1. methods
methods类似react中组件的方法,不同的是vue采用的与html绑定事件。
给个例子
/*html*/<input type="button" value="点击" v-on:click='handlClick' id="app">/*js*/var app = new Vue({el:'#app',methods:{handlClick:function(){alert('succeed!');},}})
通过在input标签中的vue命令 v-on命令绑定handlClick事件,而handlClick事件是写在methods属性里的
2. computed
/*html*/
<div id="app2">{{even}}</div>
/*js*/
var app2 = new Vue({el:'#app2',data:{message:[1,2,3,4,5,6]},computed:{even:function(){ //筛选偶数return this.message.filter(function(item){return item%2 === 0;});},},
});
可以看到筛选出来了message中的偶数,现在在控制台打印出message看看
可以看到,message并没有变,还是原来的message,然后在控制台中修改message试试,
修改后我并没有人为的触发任何函数,左边的显示就变成了新的数组的偶数选集
3. 区别
methods是一种交互方法,通常是把用户的交互动作写在methods中;而computed是一种数据变化时mvc中的module 到 view 的数据转化映射。
简单点讲就是methods是需要去人为触发的,而computed是在检测到data数据变化时自动触发的,还有一点就是,性能消耗的区别,这个好解释。
首先,methods是方式,方法计算后垃圾回收机制就把变量回收,所以下次在要求解筛选偶数时它会再次的去求值。而computed会是依赖数据的,就像闭包一样,数据占用内存是不会被垃圾回收掉的,所以再次访问筛选偶数集,不会去再次计算而是返回上次计算的值,当data中的数据改变时才会重新计算。简而言之,methods是一次性计算没有缓存,computed是有缓存的计算。
4. TodoList例子
看了一下Vue官网的todo例子,好像没有筛选功能,所以就写了有个筛选功能的例子,
下面代码中,@click
的意思是v-on='click'
的简写,:class=
的意思是v-bind:'class'=
的简写
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>todos</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><style>.wrap{width: 400px;background-color: #ccc;margin: 0 auto;}i{color: #f00;font-size: 12px;margin-left: 20px;cursor: pointer;}i:hover{font-weight: 700;}ol{/*white-space: nowrap;*/word-wrap:break-word;}.done{text-decoration: line-through;}.not{}</style>
</head>
<body><div class="wrap" id="todos"><input type="text" v-model='nextItem' @keyup.enter='append'><button id="append" @click='append'>添加</button><ol><li v-for='(item,index) of comp' :key=item.id:class='item.state ? "not" : "done"'>{{item.text}}<i @click='remove(index)'>完成</i></li></ol><button @click='all'>全部</button><button @click='done'>已完成</button><button @click='todos'>待完成</button></div>
</body>
<script>var todos = new Vue({el:'#todos',data:{nextItem: '',nextID: 1,list: [],type: null,},computed:{comp:function(){if( this.type === 0 ){return this.list;}else if(this.type === 1){ //show allreturn this.list.filter(function(item){return true;})}else if(this.type === 2){ //donereturn this.list.filter(function(item){return item.state ? false : true;})}else if(this.type === 3){ //todosreturn this.list.filter(function(item){return item.state ? true : false;})}}},methods:{append:function(){//添加到todothis.list.push({id:this.nextID++,text:this.nextItem,state: true,});this.nextItem = '';this.type = 0;},remove:function(index){ //添加到donelistthis.list[index].state = !this.list[index].state;},all:function(){this.type = 1;},done:function(){this.type = 2;},todos:function(){this.type = 3;}}});
</script>
</html>
Vue的computed(计算属性)使用实例之TodoList相关推荐
- Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
- Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
- vue的computed计算属性学习
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.这时候需要使用到vue的计算属性computed. 文件目录结构如下:利用vue脚手架创建 这 ...
- vue 中 computed 计算属性 的用法
计算属性实质就是一个方法,只不过在使用的时候只把方法名称作为属性使用,不需要加(),而不是当做方法使用. 只有计算属性的方法内部所用到的任何data中的数据发生变化,就会立刻重新计算这个计算属性的值. ...
- Vue——使用 computed 计算属性
根据人次数值分别展示不同得背景色 <span style="font-weight:600">用户位置</span> <divclass=" ...
- 面试题!vue中的计算属性、方法、侦听属性
1.计算属性 详细的内容可跳转至vue 计算属性 可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"><p> ...
- Vue入门【三】-- 详解computed计算属性
目录 computed: ♡ ‧₊˚ 基本使用 ‧₊˚ ♡ ♡ ‧₊˚语法‧₊˚ ♡ ♡ ‧₊˚效果‧₊˚ ♡ ♡ ‧₊˚ 面试问点 ‧₊˚ ♡ computed与methods的区别: comput ...
- Vue中的computed计算属性
文章目录 computed与watch的异同 不同点 相同点 示例 源码 结果 分析 computed与watch的异同 不同点 触发条件不同 computed计算属性会依赖于使用它的data属性 ...
最新文章
- 没有可用于当前位置的源代码
- python不可变的列表被称为_【Python学习】可变类型和不可变类型
- 11.14PMP试题每日一题
- VS2019社区版(Community)试用30天过期的有效解决办法
- Pandas - 查看DataFrame信息
- #2009. 「SCOI2015」小凸玩密室
- Android设备的ID
- Puppet常用资源使用详解
- Flash MX 2004 基础知识
- 查询计算机端口状态是否开启,如何查看自己的电脑3389端口是否是处于开启状态?...
- bbs.php168,PHP168与PHPWIND深度联手 CMS+BBS整合将成趋势
- 大一学生《web课程设计》用DIV+CSS技术设计的个人网页(网页制作课作业)
- 个人对于IT开发型技能段位的划分,我只是一个小小铂金,你什么段位了!
- Appium 真机测试
- 雅可比矩阵:“Jacobian“矩阵
- java单步跳入单步跳过_Eclipse 单步调试
- 数字视频处理(五)——频率域陷波滤波
- 大话设计模式 第十一章 迪米特法则 小黑小白在开车
- vue.js毕业设计,基于vue.js前后端分离教室预约系统设计与实现(H5移动项目)
- PAT L3-011 直捣黄龙
热门文章
- mysql 动态加载数据库数据库连接,如何根据每个客户端动态连接mysql数据库?
- MySQL通配符代替引号,MySQL通配符替换
- 500错误无法为jsp编译类:_JSP(Java Server Pages)的相关使用
- python编写代码实现文件的拷贝功能_如何使用Python脚本实现文件拷贝
- Netty短时间内大量写消息导致的内存问题
- uinput 用法 android 上层使用uinput 的用法来模拟 input 事件
- 基于流程的多维度企业管理框架(第三稿)
- 【转】winIO的解释与使用
- 关于三个概念:ActiveX、OLE和COM
- 威刚 S102 量产成功 制作带cd-rom启动型U盘 16g USB3.0