有相同父元素的子元素必须有独特的 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. 为什么不能用memcached存储Session

    Memcached创建者Dormando很早就写过两篇文章[1][2], 告诫开发人员不要用memcached存储Session.他在第一篇文章中给出的理由大致是说,如果用memcached存储Ses ...

  2. Smali基本语法

    .field private isFlag:z 定义变量 .method 方法 .parameter 方法参数 .prologue 方法开始 .line 12 此方法位于第12行 invoke-sup ...

  3. Android之把eoe客户端的关联ViewPager的滑动条勾出来使用

    使用代码: /** * A PageIndicator is responsible to show an visual indicator on the total views * number a ...

  4. 通过AnimationSet设置动画

    在代码中可以通过set来设置多个动画属性,这里分开来设置不同的属性. 首先先贴上布局文件,里面的imageview是用来做动画的控件 <RelativeLayout xmlns:android= ...

  5. JAVA中对List<map<String,Object>>根据map某个key值进行排序

    方法compareTo()比较此对象与指定对象的顺序.如果该对象小于.等于或大于指定对象,则分别返回负整数.零或正整数.返回整数,1,-1,0:返回1表示大于,返回-1表示小于,返回0表示相等. 普通 ...

  6. C# 访问操作注册表整理

    一..net注册表操作简介 .net中Registry 类,RegistryKey 类提供了操作注册表的接口 RegistryValueKind,用于指定操作注册表的数据类型. 二.使用实例 //获取 ...

  7. IP组播

    1  IP组播基础 IP组播技术有效地解决了单点发送.多点接收的问题.组播源只发送一份数据,被传递的信息在距组播源尽可能远的网络节点才开始被复制和分发,并且只发送给需要该信息的接收者.  说明: 本章 ...

  8. httpModules 不起作用 modules 不起作用 血泪经验

    本人也搜索了哏多解决方案.最后都没有解决... 劝您还会放弃把.. 如果非要用,劝您吧代码写到  Global.asax   里...(血泪经验)

  9. mysql-5.7.18解压版启动mysql服务

    1.下载mysql社区版 2.解压到D:\Program Files 3.在D:\Program Files\mysql-5.7.18-winx64\bin下,新建文件my.ini,内容如下: [cl ...

  10. windows的磁盘操作之四——根据逻辑分区号获得物理磁盘号(转)

    第一节中我们谈到了磁盘设备名称的两种形式: 对于物理驱动器x,形式为\\.\PhysicalDriveX,编号从0开始,例如 名称 含义 \\.\PhysicalDrive0 打开第一个物理驱动器 \ ...