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>
  • 相关阅读:
    拓扑排序笔记
    最小生成树——垃圾佬抓宠物
    次小生成树
    关于 海平面上升 与 fold的毒瘤题(easy) 的思考
    看正月点灯笼老师的笔记—01背包
    欧拉图的判定欧拉路的求法
    离散实验——关系闭包运算
    Floyd 求最短路
    离散实验——二元关系及其性质
    最小生成树
  • 原文地址:https://www.cnblogs.com/hw1988/p/13265504.html
Copyright © 2011-2022 走看看