vue中使用key管理可复用的元素
1、概述
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
key解决上述问题之外的情景：这两个元素是完全独立的，不要复用它们。
2、示例
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue中使用key管理可复用的元素</title>
</head> <body>
<div id="root">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="toggleLoginType">Toggle login type</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript">
var vm = new Vue({
el: '#root',
data: {
loginType: 'username'
},
methods: {
toggleLoginType: function() {
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
});
</script>
</body> </html>
每次切换时，输入框都将被重新渲染。
vue中使用key管理可复用的元素的更多相关文章
- Vue: 用 key 管理可复用的元素
<div id="login"> <template v-if="loginType === 'username'"> <labe ...
- ch6-条件渲染（v-if v-else v-else-if key管理可复用元素 v-show ）
1 v-if 1.1 简单使用 <h1 class="h1" v-if="ok">yes</h1> <script> var ...
- 用key管理可复用元素
先看看不用key管理可复用元素的代码.Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处,那就是在切换input时不会清楚 ...
- vue中：key 和react 中key={} 的作用，以及ref的特性？
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- Vue中使用key的作用
key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...
- Vue中的key到底有什么用？
key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...
- vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- vue学习笔记一：用Key管理可复用元素
vue为了高效的渲染元素,会尽可能的复用组件,而不是从头渲染,如下案例 <template> <div id="app"> <template v-i ...
- vue 中$index $key 已经移除了
https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...
随机推荐
- 【bzoj3930】[CQOI2015]选数 莫比乌斯反演+杜教筛
题目描述 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L+1)^N种方案.小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都求一次最大公约数,以便进一 ...
- ACdream 1738 世风日下的哗啦啦族I（分块大法+二分）
世风日下的哗啦啦族I Time Limit: 4000/2000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Submit S ...
- FZU 2041 二分枚举
思路:先O(n)预处理出ri[i][j],le[i][j],分别表示第i个位置向右边移动出j个空格需要的步数,表示第i个位置向左边移动出j个空格需要的步数. 然后枚举间隙处,二分判段最大间隔. #in ...
- POJ3207 Ikki's Story IV - Panda's Trick 【2-sat】
题目 liympanda, one of Ikki's friend, likes playing games with Ikki. Today after minesweeping with Ikk ...
- 思维导图工具 & 原型设计工具
最近需要画出系统流程架构什么的,就用到了几个思维导图工具 1. XMind -- 思维导图工具 2. MindManager -- 思维导图工具 3. AXURE RP --原型设计工具
- 【CF1068D】Array Without Local Maximums（计数DP）
题意: n<=1e5 思路:卡内存 dp[i][j][k]表示当前第i个数字为j,第i-1个数字与第i个之间大小关系为k的方案数(a[i-1]<a[i],=,>) 转移时使用前缀和和 ...
- MVC3 中使用 Ajax.ActionLink Ajax.BeginForm
原文发布时间为:2011-05-01 -- 来源于本人的百度文章 [由搬家工具导入] http://msdn.microsoft.com/en-us/library/dd381533%28VS.98% ...
- Something about the microsoft HttpContext domain design
1. HttpContext.Current.Request, Response 2.HttpHandler-> ProcessRequest 3.HttpModule-> Init, I ...
- requireJs杂项
如果设置了baseUrl,那么baseUrl目录下的模块可以被加载,那么被加载之后的模块Id是什么?文件名吗? 入口函数的写法?是不是要执行,后面加() 中文网中指的优化工具是什么? ...
- TCP/IP和HTTP协议与Socket的区别联系
参考资料: http://www.cnblogs.com/goodcandle/archive/2005/12/10/socket.html http://www.2cto.com/net/20121 ...