Vue解决if-else切换显示标签而value值不变的问题
问题描述
如题，利用Vue中if-else切换显示标签而其中输入框的value值不改变：
代码如下：
<div id="app">
<span v-if="change">
<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="change = !change">切换类型</button>
</div><script>
const app = new Vue({
el: '#app',
data: {
change: true
}
})
</script>问题如下：
可以看到在点击“切换类型”时候，输入框中的value值并不改变。
这关乎Vue底层的实现方式，出于性能考虑，会尽可能的复用已经存在的元素，而非重新创建新的元素，但是在某些场景中并不希望如此。
解决方案
在不同的标签中赋予不同的key值，这样Vue在渲染的过程中就会判定为不同的内容，从而重新加载新的输入框。
<div id="app">
<span v-if="change">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username"> <!--在这里-->
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email"> <!--在这里-->
</span>
<button @click="change = !change">切换类型</button>
</div>后记
快乐学前端
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
