有相同父元素的子元素必须有独特的 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. Orchard 之:Widget,兼看 Layer 在权限控制中的作用

    一:Widget 可以理解为控件,可以直接被页面所引用.行为类似与分部页面,比如,我们可以创建一个 商品列表 Widget,然后这个 Widget 就可以被很多页面所引用. 理解 Widget 这个概 ...

  2. APPLE框架之高效便捷的Repository解决方案

    原文地址:http://perfy315.iteye.com/blog/1460226 Spring Data JPA 转至:http://note.sdo.com/u/855924134/n/P15 ...

  3. [转]应用RSACryptoServiceProvider类轻松实现RSA算法

    在我们现实当中经常会存在需要对某些数据进行加密保护 然后进行解密的操作,比方,我们需要对某些XML配置信息里面的某些数据进行加密,以防止任何人打开该XML配置信息都能正常的看到该配置信息里面的内容,从 ...

  4. Go语言之进阶篇Socket编程

    一.Socket编程 1.什么是Socket Socket起源于Unix,而Unix基本哲学之一就是“一切皆文件”,都可以用“打开open –> 读写write/read –> 关闭clo ...

  5. 客户端连接SQL报"Cannot Generate SSPI Context"错误

    这种错误实在是让人头痛, 如果你遇到它还没有头痛的话, 请先看看微软给出的针对这个错误的这篇KB811889. 一般我遇到这种错误都是直接放弃, 重新运行sysprep之后再安装一遍所需要的软件. 然 ...

  6. 使用Spring Cloud Security OAuth2搭建授权服务

    阅读数:84139 前言: 本文意在抛砖引玉,帮大家将基本的环境搭起来,具体实战方案还要根据自己的业务需求进行制定.我们最终没有使用Spring Security OAuth2来搭建授权服务,而是完全 ...

  7. 搭建MySQL高可用负载均衡集群(转)

    阅读目录 1.简介 2.基本环境 3.配置MySQL主主复制 4.中间件简述 4.1.Haproxy介绍 4.2.keepalived介绍 5.中间件的安装与配置(haproxy.keepalived ...

  8. 【Kafka】Kafka-副本-分区设置-性能调优

    Kafka-副本-分区设置-性能调优 SparkKafkaDemo - Executors kafka replication 负载均衡_百度搜索 Kafka 高性能吞吐揭秘 - 友盟博客 - Seg ...

  9. 【Spark】Spark Streaming 动态更新filter关注的内容

    Spark Streaming 动态更新filter关注的内容 spark streaming new thread on driver_百度搜索 (1 封私信)Spark Streaming 动态更 ...

  10. LynxFly科研小四轴横空出世,开源,F4,WIFI --(转)

    首先是一大堆的感谢,太多人的帮助,感谢不完了----首先要说明,这个PCB工程的出现要感谢论坛上的台湾大哥 john800422 开源了自己的飞控板的工程文件,我这样的没啥基础的小弟们才能学会如何制板 ...