vue中对:key的理解

最新推荐文章于 2024-09-13 04:23:27 发布

原创最新推荐文章于 2024-09-13 04:23:27 发布 · 591 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

116 篇文章

订阅专栏

本文探讨了在Vue中未设置key值导致的问题及其原因。当切换类型时，由于Vue为提高性能而复用DOM节点，使得值被错误地保留。解决方法是通过添加key属性作为唯一标识，指示Vue允许或禁止DOM复用。

以下这段代码没有写key值

会出现的问题是：点击button，切换了类型，但是值却跟着过来了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<span v-if="isUser">
				<label for="username">用户账号</label>
				<input type="text"  id="username"  placeholder="用户账号"   />
			</span>
			
			<span v-else>
				<label for="email">用户邮箱</label>
				<input type="text"  id="email"  placeholder="用户邮箱"   />
			</span>
			
			<button @click="isUser=!isUser">切换类型</button>
			
			
		
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:"#app",
			data:{
				isUser:true
			}
		})
		
	</script>
</html>

原因是：

vue为了节约性能，对dom进行了复用，对比dom中各个节点，替换掉一些属性，同时又保留一些东西，

解决方法：

写上：key属性作为标识，告诉vue允不允许进行复用

<span v-if="isUser">
				<label for="username">用户账号</label>
				<input type="text"  id="username"  placeholder="用户账号" :key="1" />
			</span>
			
			<span v-else>
				<label for="email">用户邮箱</label>
				<input type="text"  id="email"  placeholder="用户邮箱"  :key="2" />
			</span>