input输入框复用问题 

<body>
<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
</script>
</body>

问题：上面的代码在执行过程中会发现，输入框中输入了内容之后再切换类型，发现之前输入的内容还在

原因：Vue在进行DOM渲染时，虚拟DOM出于性能考虑会尽可能的复用已经存在的元素而不是创建新的元素，然后在映射真实的DOM

解决：在input中添加key并且key值不同

<body>
<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>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
</script>
</body>

 

posted @ 2020-07-08 10:40  月亮小姐姐  阅读(407)  评论(0)  编辑  收藏  举报