Vue中切换了类型，发现input依然是显示之前输入的内容

最新推荐文章于 2023-12-25 10:55:03 发布

鱼是一只鱼啊

最新推荐文章于 2023-12-25 10:55:03 发布

阅读量1.5k

点赞数 1

文章标签： vue v-if input

本文链接：https://blog.csdn.net/honeycandys/article/details/115794851

版权

vue示例，点击切换登录类型后界面显示不同的模块

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

				}
			})
		</script>

	</body>
</html>

问题：如果在有输入内容的情况下，切换了类型。发现文字依然显示之前的输入内容，但是按道理来说已经切换到了另外一个input了，不应该显示之前input框输入的内容。
原因：因为vue在进行dom渲染的时候，处于性能考虑，会尽可能复用已经存在的元素，而不是重新创建新的元素。在上面的案例中，vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了
解决办法：
不希望vue出现类似重复利用的问题，可用给对应的input添加key
并且需要保证key的不同。如果key值相同，还是会出现重复利用的问题

<span v-if="isUser">
				<label for="userNmae">用户账号</label>
				<input type="text"  id="userNmae" placeholder="用户账号" key="username"/>
			</span>
			<span v-else>
				<label for="email">用户邮箱</label>
				<input type="text" id="email" placeholder="用户邮箱" key="email"/>
			</span>
			<button @click="isUser=!isUser">切换类型</button>