1. 案例
<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>
<script>
const app = new Vue({
el : '#app',
data : {
isUser : true
}
})
</script>
</body>
运行截图:
点击切换按钮,能够正确进行切换操作。
但是,当我们在input框中输入内容后,再点击切换按钮时,就会发现问题了
当我们在用户邮箱的框中输入123后,当我们点击切换按钮,发现用户账号的输入框中123居然还在。
原因:
- 这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是创建新的对象。
- 在上面的例子中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。
详细解释:
- 在vue中是通过vdom进行渲染的,当我们将第一个label以及input渲染到页面后,点击了切换按钮,这时候vdom发现我之前已经渲染了label和input,就不会再次进行渲染,而是进行一个复用操作,这是它会把包含在标签和标签中的内容进行一个替换,比如id,placeholder等,但是input框中的内容不属于这个替换的范畴。
解决办法:
- 给对应的input添加key
- 保证key不同
2. 总结
- 当我们需要切换时清空输入框,可以添加不同的key值
- 当我们不想在切换时清空输入框,可以不添加或添加相同的key值
源博客:Vue之input复用问题
B站视频:B站Vue.js-P35