有相同父元素的子元素必须有独特的 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的更多相关文章

  1. vue key的作用

    key的作用是什么? 简单来说: key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点. 1. 更准确 因为带key就不是就地复用了,在sa ...

  2. vue key 的另外一个用法 过度

    key也可以用于强制替换元素/组件而不是重复使用它.当你遇到如下场景时它可能会很有用: 完整地触发组件的生命周期钩子 触发过渡 例如: <transition> <span :key ...

  3. vue -- key的特殊作用

    v-for渲染的列表的结构采用“就地复用”的策略,也就说当数据重新排列数据时,会复用已在页面渲染好的元素,不会移动 DOM 元素来匹配数据项的顺序,这种模式是高效的,改变现有位置的结构的数据即可 eg ...

  4. vue key值的重复键问题报错

    1.问题描述:在vue2.0+ 中做一个公用的评论组件,:key使用的时创建评论的时间,当加载更多的时候,会报错: Duplicate keys detected: '2019-01-24T07:15 ...

  5. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  6. Vue开发入门看这篇文章就够了

    摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了 作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...

  7. vue补充

    一.安装vue-cli脚手架 1.淘宝镜像下载 用淘宝的国内服务器来向国外的服务器请求,我们向淘宝请求,而不是由我们直接向国外的服务器请求,会大大提升请求速度,使用时,将所有的npm命令换成cnpm即 ...

  8. vue 强制刷新组件重新渲染

    实现功能:使用富文本编辑器编写文章,然后把编写成功的文章用子组件显示. 问题描述:父组件给子组件传递数据,子组件第一次调用数据的时候页面渲染是正常的,当数据变化的时候,子组件的页面渲染就失效了. 问题 ...

  9. 常用的前端框架Angular、React、Vue

    VUE 一.vue导读 1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用 1.2 vue环境的导入: 本地导入 <!--方法 ...

随机推荐

  1. Logcat多tag过滤

    当Android设备通过usb连接成功后,在logcat中能看到很多log信息,但太多了很容易将我们关注的日志给淹没掉,所以我们需要过滤.如果接入了不同的SDK,那么log的tag可能会不同,所以有时 ...

  2. 获取AppStore上架后的应用版本号

    应用通过审核以后,由开发者设置应用上架,但何时能在appstore搜索到该应用,这个时间不等,有时候15分钟左右有时候2个多小时,以前就是隔一段时间打开网页然后刷新一下,或者搜索一下,查看版本号,操作 ...

  3. 一分钟了解ArrayList和Vector的区别

    一.是否是线程安全的 Vector是同步的, 而ArrayList不是.因为Vector是同步的, 所以它是线程安全的.同样, 因为Vecotr是同步的, 所以他需要额外的开销来维持同步锁, 所以它要 ...

  4. PHP获取指定函数定义在哪个文件中及行号

    当调试开源的代码时,希望查看某个函数的定义,那么就需要定位其位置.特别是有的项目中,函数会有多个地方都有定义,那么如果我想知道当前调用的这个函数是在哪里定义的,可以用下面这个方法. function ...

  5. LaTeX技巧206:使用gather输入多行公式的技巧

    上文中提到了几个输入多行公式的环境,gather也是其中之一,gather输入的好处是每一行,他都会按照前文的编号计数器进行向下计数,这样保证了公式编号的连贯性.所以,当我们输入公式的每一行公式需要独 ...

  6. LaTeX技巧205:使用split输入多行公式技巧

    我们在输入多行公式的时候,split,array,multiline,align,aligned等等都是我们可以选用的环境,这里介绍split的使用方法.演示效果图: 演示代码:\documentcl ...

  7. cannot import name 'main' 解决方案

    error description: pip3 install numpy Traceback (most recent call last): File "/usr/bin/pip3&qu ...

  8. [转]使用PHPExcel判别和格式化Excel中的日期格式

    From : http://renzhen.iteye.com/blog/799391 最近,在做一个导入功能,在系统中使用PHPExcel类库,读取上传的Excel文件,然后进行字段映射,最后将Ex ...

  9. jQuery.data() 的实现方式,jQuery16018518865841457738的由来,jQuery后边一串数字的由来

    原文地址: http://xxing22657-yahoo-com-cn.iteye.com/blog/1042440 jQuery.data() 的实现方式 jQuery.data() 的作用是为普 ...

  10. 自适应尺寸变化的meanshift跟踪

    近期在看meanshift方面的文章,看了一篇博文对这篇文章<Robust scale-adaptive meanshift for tracking>寄予非常高的评价,所以把这篇文章简要 ...