vue 之 key
key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。
有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。
最常见的用例是结合 v-for:
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
完整地触发组件的生命周期钩子
触发过渡
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时,<span> 会随时被更新,因此会触发过渡。
vue 之 key的更多相关文章
- (转)Vue种key的作用
https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...
- vue中key的作用 v-for里警告 v-if的复用
vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...
- Vue: 用 key 管理可复用的元素
<div id="login"> <template v-if="loginType === 'username'"> <labe ...
- 关于Vue中:key="index"的console警告
在写vue项目时,浏览器的console出现如下警告信息: [Vue warn]: Property or method "index" is not defined on the ...
- Vue中 key keep-alive
keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...
- vue 使用key唯一令牌解决表单值混乱
vue在渲染元素时,出于效率考虑,会尽可能地复用已有元素的而非重新渲染,如果你不希望这样可以使用Vue中提供的key属性,它可以让你决定是否要复用元素,key值必须是唯一的 代码: <!doct ...
- VUE router-view key 属性解释
router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的. <template> <section clas ...
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
- vue中 key 值的作用
原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...
随机推荐
- jetty 插件启动指定端口号
clean jetty:run -Djetty.port=端口号
- Redis+Twemproxy+HAProxy集群(转) 干货
原文地址:Redis+Twemproxy+HAProxy集群 干货 Redis主从模式 Redis数据库与传统数据库属于并行关系,也就是说传统的关系型数据库保存的是结构化数据,而Redis保存的是一 ...
- WebGoat 8安装、配置、使用教程(CentOS)
一.说明 1.1 背景说明 之前只用过dvwa,听说WebGoat也是类似的平台后,想装来试试有没有什么异同. 看了下载文件,和网上官方的.非官方的安装教程,感觉很多都对不上: 最后发现WebGoat ...
- ntpd修改版本号教程
1.查看当前ntpd版本号 执行:ntpd -v 2.查看当前ntpd位置 执行:which ntpd 3.备份ntpd 执行:cp /usr/sbin/ntpd /usr/sbin/ntpd.bak ...
- Linux只下载不安装软件包
有时我们并不需要安装软件而只要下载软件包. 包格式 命令 命令所属包 命令下载格式 rpm yumdownloader yum-utils yumdownloader package_name deb ...
- zabbix3.4.7集成grafana详细步骤
打开官方网站下载grafana并安装 wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-5.0.4-1. ...
- python小数据池,代码块知识
一.什么是代码块? 根据官网提示我们可以获知: A Python program is constructed from code blocks. A block is a piece of Pyth ...
- Win10系列:UWP界面布局基础3
在实际项目开发中,为控件属性赋值时经常会遇到属性值在设计时处于未知状态,而只有在应用程序运行时才能获取到.这种情况下,直接赋值方法是无法满足的,可以使用XAML标记扩展(Markup Extensio ...
- python-面向对象增强版
class Person: def __init__(self, name, id, gender, birth): self.name = name # 实例变量 对象里的变量 self.id = ...
- bzoj5016
题解: 吧询问变成前缀形式 然后莫队 代码: #include<bits/stdc++.h> ; using namespace std; ]; ,L=,R=; ,Ans[N]; bool ...