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>
  • 相关阅读:
    对公信贷系统与其他系统交互方式总结
    测试验收标准checklist
    测试风险汇报
    接口测试checklist
    52 | 深入浅出网站可扩展性架构设计
    51 | 深入浅出网站伸缩性架构设计
    html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。(转载)
    IO流
    多线程
    Java网络编程
  • 原文地址:https://www.cnblogs.com/hw1988/p/13265504.html
Copyright © 2011-2022 走看看