vue切换登录方式时input登录框复用上一个登录框内容的问题

如下图所示，登录方式为用户名称时，输入框输入1，切换登录方式后，输入框内容还是1

1. 原因

• 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
• 在上面的案例中，Vue内部会发现切换后的input跟原来的一样，就会直接使用原来的。

2. 解决办法

• 给对应的input添加key
• 保证每个key都不一样

<div id="app" v-cloak>
        <div v-if="show">
            <!-- for绑定input的id，点击文字时文本框也可以获得焦点 -->
            <label for="username">用户名称：</label>
            <input type="text" id="username" placeholder="用户名称" key="username">
        </div>
        <div v-else>
            <label for="email">用户邮箱：</label>
            <input type="text" id="email" placeholder="用户邮箱" key="email">
        </div>
        <button @click="show = !show">切换登录</button>
    </div>