简单理解vue中track-by属性


Posted in Javascript onOctober 26, 2016

本文实例为大家解析了vue中track-by的属性,供大家参考,具体内容如下

api:http://cn.vuejs.org/guide/list.html#track-by

示例地址:https://jsfiddle.net/stardew/f1eju0ku/5/

无track-by情况:数据修改时,无论值是否被修改,dom都被重新渲染(控制台可以看到)

加入track-by属性:数据修改时,不变数据所在的dom不被重新渲染,已改变的数据所在dom才被重新渲染

track-by的两种使用方法:

1. 使用数据中某唯一字段,例如_uid

<div id="example">
 <p v-for="item in items" track-by="_uid">
 {{item.message}}
 </p>
 <input type="button" value="修改" @click="modify"/>
 <input type="button" value="还原" @click="reduct"/>
</div>
// 初始数据
items: [
 { _uid: '111111', message: '111' },
 { _uid: '222222', message: '222' },
 { _uid: '333333', message: '333' },
 { _uid: '444444', message: '444' },
 { _uid: '555555', message: '555' }
]
// 修改成
modify: function () {
 this.items = [
 { _uid: '111111', message: '111' },
 { _uid: '666666', message: '222' },
 { _uid: '333333', message: '3333' },
 { _uid: '888888', message: '4444' },
 { _uid: '999999', message: '5555' }
 ]
}

渲染效果如下图右(左边无track-by,右边有track-by),_uid和message都不变的情况下,才不被重新渲染,只有第一组符合条件。

简单理解vue中track-by属性

2. 使用$index,其它条件同上

<div id="example">
 <p v-for="item in items" track-by="$index">
 {{item.message}}
 </p>
 <input type="button" value="修改" @click="modify"/>
 <input type="button" value="还原" @click="reduct"/>
</div>

渲染效果如下图右,message的值第一、二条都没改变,所以一、二都没有重新渲染。

简单理解vue中track-by属性

模板中同时使用message和_uid时,只有两者都不变的情况下才不重新渲染,如下:

<div id="example">
 <p v-for="item in items" track-by="$index">
 {{item.message}} {{item._uid}}
 </p>
 <input type="button" value="修改" @click="modify"/>
 <input type="button" value="还原" @click="reduct"/>
</div>

简单理解vue中track-by属性

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自动生成对象的属性示例代码
Oct 28 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
javascript iframe跨域详解
Oct 26 #Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 #Javascript
jQuery的ready方法实现原理分析
Oct 26 #Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 #Javascript
BootStrap tab选项卡使用小结
Aug 09 #Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 #Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jquery插件之easing使用
2010/08/19 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
微信小程序 http请求的session管理
2017/06/07 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
python处理html转义字符的方法详解
2016/07/01 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
Unix如何添加新的用户
2014/08/20 面试题
史学专业毕业生求职信
2014/05/09 职场文书
会计求职自荐信
2014/06/20 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
法律服务所工作总结
2015/08/10 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server