vue key
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
- 完整地触发组件的生命周期钩子
- 触发过渡
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时,<span> 会随时被更新,因此会触发过渡。
更新:2019.1.7
对于数组最好使用数组的item(真正的值),而不是index。因为index都是从0到数组的长度,不唯一,容易造成渲染错误。
vue key的更多相关文章
- vue key的作用
key的作用是什么? 简单来说: key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点. 1. 更准确 因为带key就不是就地复用了,在sa ...
- vue key 的另外一个用法 过度
key也可以用于强制替换元素/组件而不是重复使用它.当你遇到如下场景时它可能会很有用: 完整地触发组件的生命周期钩子 触发过渡 例如: <transition> <span :key ...
- vue -- key的特殊作用
v-for渲染的列表的结构采用“就地复用”的策略,也就说当数据重新排列数据时,会复用已在页面渲染好的元素,不会移动 DOM 元素来匹配数据项的顺序,这种模式是高效的,改变现有位置的结构的数据即可 eg ...
- vue key值的重复键问题报错
1.问题描述:在vue2.0+ 中做一个公用的评论组件,:key使用的时创建评论的时间,当加载更多的时候,会报错: Duplicate keys detected: '2019-01-24T07:15 ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
- Vue开发入门看这篇文章就够了
摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了 作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...
- vue补充
一.安装vue-cli脚手架 1.淘宝镜像下载 用淘宝的国内服务器来向国外的服务器请求,我们向淘宝请求,而不是由我们直接向国外的服务器请求,会大大提升请求速度,使用时,将所有的npm命令换成cnpm即 ...
- vue 强制刷新组件重新渲染
实现功能:使用富文本编辑器编写文章,然后把编写成功的文章用子组件显示. 问题描述:父组件给子组件传递数据,子组件第一次调用数据的时候页面渲染是正常的,当数据变化的时候,子组件的页面渲染就失效了. 问题 ...
- 常用的前端框架Angular、React、Vue
VUE 一.vue导读 1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用 1.2 vue环境的导入: 本地导入 <!--方法 ...
随机推荐
- Java_集合操作_将元素插入List的指定位置
package test; import java.util.ArrayList; import java.util.List; public class test { public static v ...
- Java常用排序算法及性能测试集合
测试报告: Array length: 20000 bubbleSort : 573 ms bubbleSortAdvanced : 596 ms bubbleSortAdvanced2 : 583 ...
- Android之针对WebView的全屏播放
转载请标明转载处:http://bbs.csdn.net/topics/390839259 本人刚学android,菜鸟一个,第一次写帖子,最近因为项目要用webview加载html5的视频,开始不能 ...
- 解决 dotNetZip 解压乱码的问题,支持ZIP分卷解压缩
using (ZipFile zip = ZipFile.Read("D:\\test\\2007.zip",System.Text.Encoding.Default)) { fo ...
- 使用Numpy验证Google GRE的随机选择算法
最近在读<SRE Google运维解密>第20章提到数据中心内部服务器的负载均衡方法,文章对比了几种负载均衡的算法,其中随机选择算法,非常适合用 Numpy 模拟并且用 Matplotli ...
- 图像质量评估(IQA)
图像质量评估函数的分类曾是一个比较有争议的话题,在2l世纪以前曾经有过 比较多的讨论.但是随着研究的深入和技术的广泛应用,研究人员对于图像质量 评估函数的分类有了统一的认识,即从实际应用中参考信息供给 ...
- 在此处打开OpenPowershellHere右键 在此处打开命令窗口右键
windows 10 右键添加在本文件夹打开cmd 或prowershell 在此处打开OpenPowershellHere右键 Windows Registry Editor Version 5 ...
- 迭代器模式(Iterator)
@@@模式定义: 提供一种方法顺序访问一个聚合对象中的各个元素,而又不需暴露该对象的内部表示. @@@练习示例: 工资表数据的整合 @@@示例代码: \pattern\PayModel.java ~ ...
- Log4cplus使用指南
1. Log4cplus简介 log4cplus是C++编写的开源的日志系统,前身是java编写的log4j系统,受Apache Software License保护,作者是Tad E. Smith ...
- window.open不被拦截的实现代码
$("#last").click(function(){ var w=window.open(); setTimeout(function(){ w.location=" ...