案例分析
<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值不同