Vue input的复用问题如何解决

最新推荐文章于 2022-07-29 15:39:39 发布

wendyNo

最新推荐文章于 2022-07-29 15:39:39 发布

阅读量526

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wendyNo/article/details/112538557

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

案例分析

<body>
	<div id="app">
		<span v-if="isUser">
			<label for="username">用户账号</label>
			<input type="text" id="username" name="username" placeholder="用户账号" key="username">
		</span>	
		<span v-else>
			<label for="email">邮箱</label>
			<input type="text" name="email" id="email" placeholder="邮箱" key="email">
		</span>	
		<button @click="isUser = !isUser">切换类型</button>
	</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			isUser:true,
		},
		methods:{
			btn(){
				console.log(111)
			}
		}
	});
</script>
</body>

问题

如果我们在有输入内容的情况下，切换了类型，可以发现文字依然显示之前输入的内容，按道理来说，应该切换到另一个input元素中，而且另一个input元素中什么都没有，为什么会这样呢？

解答

这是因为Vue在进行Dom渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

解决

如果我们不希望Vue出现类似复用利用的问题，可以给对应的input添加key，并且要保证key值不同

wendyNo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue input的复用问题如何解决

案例分析<body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" name="username" placeholder="用户账号" key="username"> </span> <span v-else> &l
复制链接

扫一扫

专栏目录