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环境的导入: 本地导入 <!--方法 ...
随机推荐
- 用SwipeBackLayout实现滑动关闭当前Activity
说起SwipeBackLayout,我对它还是有一定怨念的.当时就希望能实现关闭当前Activity的效果,但完全搜不当相关的东西,最后好不容易搜到了这个SwipeBackLayout,觉得可以实现滑 ...
- Orchard模块开发全接触5:深度改造前台第二部分
在这一部分,我们继续完善我们的购物车,我们要做以下一些事情: 1:完成 shoppingcart.cshtml: 2:让用户可以更新数量及从购物车删除商品: 3:创建一个 widget,在上面可以看到 ...
- python三大web框架Django,Flask,Flask,Python几种主流框架,13个Python web框架比较,2018年Python web五大主流框架
Python几种主流框架 从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python We ...
- SVG 相关整理
1. 中文参考手册: http://www.runoob.com/svg/svg-reference.html SVG HTML5 资源教程 http://www.html5tricks.com/ta ...
- DPI (Deep Packet Inspection) 深度包检测技术
详解DPI与网络回溯分析技术 随着网络通讯技术进步与发展,网络通讯已跨入大数据时代,如何监控各类业务系统的通讯数据在大数据流量中传输质量,以及针对海量的网络通讯数据的范畴中存在少量的恶意流量的检测,避 ...
- libc中的标准函数 localtime和localtime_r 的用法
http://baike.baidu.com/view/1080853.htm 随便一查,就可以查到基本用法,但是... http://blog.csdn.net/maocl1983/article/ ...
- ubuntu 安装 android studio
总共分三个步骤: 安装JDK 这里引用下别人的安装过程http://blog.csdn.net/bhq2010/article/details/6839762 注:android studio 版本为 ...
- 基于S3C2440的嵌入式Linux驱动——看门狗(watchdog)驱动解读
本文将介绍看门狗驱动的实现. 目标平台:TQ2440 CPU:s3c2440 内核版本:2.6.30 1. 看门狗概述 看门狗其实就是一个定时器,当该定时器溢出前必须对看门狗进行"喂狗“,如 ...
- AVL树原理及实现 +B树
1. AVL定义 AVL树是一种改进版的搜索二叉树.对于一般的搜索二叉树而言,如果数据恰好是按照从小到大的顺序或者从大到小的顺序插入的,那么搜索二叉树就对退化成链表,这个时候查找,插入和删除的时间都会 ...
- iOS开发-策略模式
策略(Strategy)模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化.策略模式是对算法的包装,是把使用算法的责任和算法本身分割开 ...