vue中的复用问题_vue页面复用按钮无效-程序员宅基地

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
  <div id="app">
    <span v-if="isShow">
      <label for="user">用户账号:</label>
      <!-- label中 for属性的作用:点击label使input获取焦点 -->
      <input type="text" id="user" placeholder="请输入用户账号" key="user">
    </span>
    <span v-else>
      <label for="user">用户邮箱:</label>
      <input type="text" id="email" placeholder="请输入用户邮箱" key="email">
    </span>
    <button @click="change">登录类型切换</button>
  </div>

  <script>
    const vm = new Vue({
    
      el: '#app',
      data: {
    
        isShow: true
      },
      methods: {
    
        change: function () {
    
          this.isShow = !this.isShow
        }
      },
    })
  </script>
</body>
</html>

// 当用户在输入账号时，已经输入了一半但是想切换邮箱登录
// 问题：此时输入的内容会带到切换后的邮箱登录方式的input框中

// 原因： 是因为vue的处理机制的方式 因为vue在处理dom渲染时，会进行一个虚拟dom的过程 出于性能考虑
// 会对一些重复的元素进行复用 而不会再去创建新的元素

// 解决方式：对每一个input加一个key`在这里插入代码片` 当key 的值相同时就会复用 不同时则不会复用

本文链接：https://blog.csdn.net/weixin_43949851/article/details/104330179

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

KERNEL_DATA_INPAGE_ERROR 蓝屏错误-程序员宅基地

文章浏览阅读4.9w次，点赞3次，收藏7次。可能自己在C++编程中没有处理好内存管理,导致电脑偶尔出现KERNEL_DATA_INPAGE_ERROR错误并蓝屏重启。0×0000007A：KERNEL_DATA_INPAGE_ERROR 错误分析：这个错误往往是内存中的内核数据无法读如内存造成的。有可能是虚拟内存页面文件中存在坏簇、病毒、磁盘控制其错误、内存有问题。从页面文件读/加载存储在硬盘驱动器的信息存在一些问题。_kernel_data_inpage_error

Android代码中设置字体大小，字体颜色，显示两种颜色汇总_android:id调用的字怎么修改大小-程序员宅基地

文章浏览阅读1.8w次，点赞6次，收藏13次。Android代码中设置字体大小，字体颜色，显示两种颜色在xml文件中字体大小用的像素<TextView android:id="@+id/uppaid_time" android:layout_width="wrap_content" android:layout_height="wrap_content" ..._android:id调用的字怎么修改大小

无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.1 Index用户列表]...-程序员宅基地

文章浏览阅读79次。3.1 Index用户列表或许当前域下的用户列表 [Authorize]public async Task<ActionResult> Index(){ var userList = new List<IUser>(); try { var client = AuthenticationHelper.G..._azure sdk .net 用法登录azure

attribute 总结_attribute((warn_unused_result))-程序员宅基地

文章浏览阅读425次。                attribute是GNU C特色之一,在iOS用的比较广泛.系统中有许多地方使用到. attribute可以设置函数属性（Function Attribute ）、变量属性（Variable Attrib___attribute__((warn_unused_result))

spring security oauth2之refresh token_spring security refresh token-程序员宅基地

文章浏览阅读9.6k次。oAuth2.0认证服务器生成的Access_token是有有效期限制的默认为12个小时，refresh_token默认为三十天。如果Access_token提示过期，可以根据refresh_token获取新的Access_token下面介绍如何生成refresh_token，并根据refresh_token获取新的Access_token：authorizedGrantTypesoa..._spring security refresh token

Python 玩出花儿了！一文教你用 Python 制作吃豆人游戏！ | 附代码-程序员宅基地

文章浏览阅读7.2k次，点赞19次，收藏70次。作者 | 李秋键责编 | Carol封图 | CSDN 下载自视觉中国近几年来Python语言得到了快速发展，而Pygame作为Python开发应用和游戏必备的库更是展现了Python的..._python吃豆人实验原理

随便推点

debian下切换内核_debian 切换内核-程序员宅基地

文章浏览阅读3.3k次。最近在硬件上测试拨号，在排除问题的过程中，升级了内核。结果升级完后，不但不能解决问题，反而带来了新的问题。因此需要将内核版本降下来。网上参考了很多文章，经过了一番测试，最后算是解决了问题。在此记录一下，一方面怕自己时间长了忘记了，另一方面，如果有网友碰到类似的问题，可以借鉴。话不多说，有效的解决办法有两种：1. 修改/etc/default/grub文件关于修改这个文件，无论是csdn还是stackexchange等网页上，都提到可以修改该文件中的GRUB_DEFAULT参数来实现内核的切换。并_debian 切换内核

51按键外部中断控制流水灯_case 0xfe: return 0; case 0xfd: return 1; case 0xf-程序员宅基地

文章浏览阅读2.1w次，点赞28次，收藏218次。实验二外部按键输入一、实验目的1、了解单片机检测口方法2、了解单片机外部中断原理3、了解按键输入原理二、实验内容1、完成按键扫描控制流水灯2、完成按键外部中断控制流水灯三、实验原理四、实验电路与程序1、软件实验一：按键扫描控制流水灯1）实验要求：读取四个按键的输入，检测到按下后控制灯流动一段时间，然后继续读取按键输入。2）实验目的：1. 掌握按键消抖方法；2. 掌握单片机端口检测方法3）实验说明：通过本实验，可以了解单片机读取IO口电平的方法，同时也可以了解单片机编程，调试方_case 0xfe: return 0; case 0xfd: return 1; case 0xfb: return 2; case 0xf7