切换小问题

有时候，我们登录的时候会有多个选项，比如切换成手机号邮箱登录，但是当我们点击切换后，改变了样式，input里面的值却没有改变过来

<span v-if="active">
　　<label>手机号</label>
　　<input type="" name="" id="name" />
</span>
<span v-else>
　　<label>邮箱</label>
　　<input type="" name="" id="name" />
</span>
<button type="button" @click="change">切换账号</button>

这个原因是，在vue中，会有一个虚拟dom，为了提高效率，当点击切换的时候，虚拟dom会判断一下是不是之前的结构，如果是，就用之前的结构，所以input里面的值没有改变

但是我们要解决这个问题，那么我们就在input里面加一个标识，给他加一个key=“”，当两个名字不一样的时候，就会清除之前的结构。

<span v-if="active">
　　<label>手机号</label>
　　<input type="" name="" id="name" key="a" />
</span>
<span v-else>
　　<label>邮箱</label>
　　<input type="" name="" id="name" key="b"/>
</span>
<button type="button" @click="change">切换账号</button>