vue中使用v-if、v-else切换input复用问题?
一、html
<div id="app">
<div v-if="isUser">
<label for="username" class="username">用户账号:</label>
<input type="text" id="username" placeholder="用户账号" key="username">
</div>
<div v-else>
<label for="email" class="email">用户邮箱:</label>
<input type="text" id="email" placeholder="用户邮箱" key="email">
</div>
<button @click="isUser=!isUser">切换类型</button>
</div>
二、js
const app =new Vue({
el:'#app',
data:{
isUser:true
}
})
三、解析input复用问题
1)、这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已存在的元素,而不是创建新的元素。
2)、如果不希望Vue出现类似重复利用的问题,可以给对应的input添加key并且’需要保证key不同’