v-for key
key
当 Vue.js 用 v-for
正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index"
。
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
属性。理想的 key
值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by
,但它的工作方式类似于一个属性,所以你需要用 v-bind
来绑定动态值 (在这里使用简写):
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
|
建议尽可能在使用 v-for
时提供 key
,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制,key
并不与 v-for
特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。
————————————————————————————————————————————————————————————
在开发时,遇到删除v-for渲染的内容时,内容错乱的问题。
原因就是因为没有绑定key值。
需要绑定。
且唯一,不变。
貌似还会对渲染动画有影响,先mark,遇到再说。
v-for key的更多相关文章
- Java集合源码分析(七)HashMap<K, V>
一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap ...
- Android Studio 打包签名发布New Key Store
Key store path:存放路径 Key Alias:别名 Validity(years):有效期 Certificate:证书 First and Last Name: Organizatio ...
- PHP、Java、C#实现URI参数签名算法,确保应用与REST服务器之间的安全通信,防止Secret Key盗用、数据篡改等恶意攻击行为
简介 应用基于HTTP POST或HTTP GET请求发送Open API调用请求时,为了确保应用与REST服务器之间的安全通信,防止Secret Key盗用.数据篡改等恶意攻击行为,REST服务器使 ...
- php二维数组,按照指定的key,去排序value值
$arr = array( '11'=>array( 'a'=>1, 'b'=>2, ), '22'=>array( 'a'=>3, 'b'=>4, ), '33' ...
- Google map v3 using simple tool file google.map.util.js v 1.0
/** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的(div)z-inde ...
- Google map v3 using simple tool file google.map.util.js v 1.1
/** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的z-index不能小于 ...
- Google map v3 using simple tool file google.map.util.js v 1.2
更新添加日志:在1.1的基础上添加marker的文字显示.测距工具. /** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 20 ...
- Linux IPC实践(6) --System V消息队列(3)
消息队列综合案例 消息队列实现回射客户/服务器 server进程接收时, 指定msgtyp为0, 从队首不断接收消息 server进程发送时, 将mtype指定为接收到的client进程的pid ...
- 遍历map并判断key的值
jsp页面:三种方法输出 <c:forEach items="${myMap}" var="mapV" varStatus="status&qu ...
- java获取map中的最小KEY,最小VALUE
import java.util.Arrays; import java.util.Collection; import java.util.HashMap; import java.util.Map ...
随机推荐
- Linux 配置SSH免密登陆
1.在hadoop01服务器上 通过ssh -keygen 生成公私钥 [ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa] 2.把公钥给hadoop02服务器 3. ...
- How to detect, enable and disable SMBv1, SMBv2, and SMBv3 in Windows and Windows Server
转自:https://support.microsoft.com/en-us/help/2696547/detect-enable-disable-smbv1-smbv2-smbv3-in-windo ...
- 程序员装X指南
一.准备工作“工欲善其事必先利其器.” 1.电脑不一定要配置高,但是双屏是必须的,越大越好,能一个横屏一个竖屏更好.一个用来查资料,一个用来写代码 .总之要显得信息量很大,效率很高. 2.椅子不一 ...
- 设计Optaplanner下实时规划服务的失败经历
其实本文不知道算不算一个知识点分享,过程很美妙,但结果很失败.我们在利用Optaplanner的Real-Time planning(实时规则)功能,设计实时在线规划服务时,遇到一个属于Optapla ...
- 使用java注解实现toJson方法
如果我有一个对象user,它有几个属性,我想把该对象序列化成一个json字符串,怎么做?我怎么把这种类型的问题实现成一个函数? 注解类似于在被注解的对象上,添加一些简单的属性.在运行时解析这些属性,以 ...
- WEB 性能优化导图
看了一下网上对于web性能优化的一些帖子,不是很直观,花了点时间画了一个思维导图. refers: https://segmentfault.com/a/1190000011936772 https: ...
- Struts2多文件上传原理和示例
一.创建上传文件的页面,代码如下所示 1.Struts2也可以很方便地实现多文件上传. 在输入表单域增加多个文件域:multifileupload.jsp <%@ page lan ...
- 海量数据中的TOPK问题小结
1.利用堆找出最大的K个数 首先,先理解下用堆找出最大的K个数的常用解法,例如问题是“从M(M <= 10000)个数中找出最大的K个数” (1)利用最大堆 建立一个N=M大小的大顶堆,然后输出 ...
- centos7虚拟机克隆后设置固定IP
虚拟机centos7克隆一份出来之后,新centos7更改了固定IP,可是不生效.重启网卡时报错: network.service: control process exited, code=exit ...
- 我的es6笔记
变量 1. let 和 const 声明的变量不在window上了 2. es6中对于块级作用域里的函数声明实现不统一,要避免在大括号里声明函数,尽量用函数表达式来替代. 3. let和const声明 ...