简单理解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+FSO遍历文件夹下文件并显示
Mar 07 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Flask框架信号用法实例分析
2018/07/24 Python
int在python中的含义以及用法
2019/06/27 Python
python数据归一化及三种方法详解
2019/08/06 Python
Python matplotlib可视化实例解析
2020/06/01 Python
python中doctest库实例用法
2020/12/31 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
30岁生日感言
2014/01/25 职场文书
购房意向书
2014/04/01 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
离婚协议书的范本
2015/01/27 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Win11更新失败并提示0xc1900101
2022/04/19 数码科技