Vue——切换登录方式案例小问题（input复用）——2020.11.17

一丶案例链接

Vue切换登录方式案例

二丶案例小问题

（一）小问题：

• 如果我们在有输入内容的情况下，切换了类型，我们会发现文字一仍然显示之前的输入的内容
• 但是按道理讲，我们应该切换到另一个input的元素中
• 在另一个input元素中，我们并没有输入内容
• 为什么会出现这个问题呢？

（二）问题解答：

• 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素
• 在案例中，Vue内部会发现原来的input元素不再使用，直接作为else中input来使用

（三）解决方案：

• 如果我们不考虑Vue出现类似重复利用的问题，可以给对应的input添加key
• 并且保证key不相同

<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="isUserClick()">切换登录方式</button>
</div>

——千淘万漉虽辛苦,吹尽狂沙始到金——