input复用问题

input的复用：Vue里面要实现某一效果时要先给VDOM，再由VDOM渲染到实际效果中，当VDOM（虚拟DOM）中已经创建了一个label、input时，转变类型之后，会检测要传入的是什么，发现还是input之后就不会再创建一个新的input，只会在原来的基础上进行改变。所以当一开始在账号中输入了内容之后切换到邮箱里以后内容依然在，并不会清空

<div id="app">
    <span v-if="isUser">
        <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="isUser=!isUser">切换类型</button>
</div>

解决办法：
input里面的key相当于一个标识符，当两个input的key一样时VDOM就不会重新创建input，而是改变不同的，保留原有内容，当key不一样时就会重新创建一个input，不会出现input复用的情况