简单理解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 相关文章推荐
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
bootstrap table使用入门基本用法
May 24 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 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的计数器程序
2006/10/09 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js使用心得分享
2015/01/13 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python 文件操作实现代码
2009/10/07 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python放大图片和画方格实现算法
2018/03/30 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
傲盾软件面试题
2015/08/17 面试题
职工运动会邀请函
2014/01/19 职场文书
应聘面试自我评价
2014/01/24 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技