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>
  • 相关阅读:
    PHP错误报告级别及调整方法
    使用微妙计算PHP脚本执行时间
    修改PHP的默认时区
    Rabbimq 安装过程,还有踩得坑!centos 安装
    "services "kubernetes-dashboard" not found"
    转载
    安装php rabbitmq扩展,继上一篇安装Rabbitmq
    php hash_file
    composer 安装
    php 朴韩屏
  • 原文地址:https://www.cnblogs.com/hw1988/p/13265504.html
Copyright © 2011-2022 走看看