简单理解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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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 foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP数组相关函数汇总
2015/03/24 PHP
Yii使用技巧大汇总
2015/12/29 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
JS表单传值和URL编码转换
2018/03/03 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python os.path模块常用方法实例详解
2018/09/16 Python
详解Python发送email的三种方式
2018/10/18 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
pip安装python库的方法总结
2019/08/02 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
python绘制雪景图
2019/12/16 Python
pytorch 常用线性函数详解
2020/01/15 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python dict乱码如何解决
2020/06/07 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
PHP中如何创建和修改数组
2012/05/02 面试题
什么是设计模式
2012/06/17 面试题
化妆品店促销方案
2014/02/24 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
临时租车协议范本
2014/09/23 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
教育教学读书笔记
2015/07/02 职场文书