提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue中对:key的理解

Vue 理解 Key
2023-09-11 14:22:30 时间

以下这段代码没有写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>

相关文章