vue中使用v-if、v-else切换input复用问题?

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不同’