zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    关于Unity中资源打包
    关于Unity中的物理
    关于Unity中特殊目录
    关于Unity中脚本
    千八行
    早春游园
    西湖冬景
    七尖行
    黄山游记
    四季
  • 原文地址:https://www.cnblogs.com/hw1988/p/13265504.html
Copyright © 2011-2022 走看看