登录切换案例以及input复用问题

最新推荐文章于 2021-11-29 14:36:41 发布

407指导员

最新推荐文章于 2021-11-29 14:36:41 发布

阅读量156

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/111055186

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

登录切换案例以及input复用问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录切换的input复用问题</title>
</head>
<body>
<div id="app">
  <!--使用v-if来判断登录方式 -->
  <span v-if="loginStyle">
  <label for="userName"> 用户账号</label>
   <input type="text" id="userName" placeholder="请输入用户账号">
 </span>
  <span v-else>
   <label for="email"> 用户邮箱</label>
    <!--placeholder用户可见内容放在输入框内-->
   <input type="text" id="email" placeholder="请输入用户邮箱">
 </span>
  <!--用于切换的按钮-->
  <button @click="changeLogin">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      loginStyle: true
    },
    methods: {
      changeLogin() {
        this.loginStyle =!this.loginStyle;
      }
    }
  });
</script>
</body>
</html>

上边代码存在一个问题，就是如果输入框存在内容，此时想再次切换登录方式，input框不会被刷新，里边的内容依然存在。

在vue中并不是直接去渲染DOM，而是首先将DOM元素加载到内存中，形成一个虚拟的DOM也就是VDOM，在这个期间，出于性能的考虑，会尽可能多的复用已经存在的元素，而不是重新创建新的元素。

在这个案例中，if和else只会显示一个，但是他们有两个input框，虚拟DOM并不会真的创建两个input元素，而是选择复用第一个创建的input框，直接作为else中的使用

<div id="app">
  <!--使用v-if来判断登录方式 -->
  <span v-if="loginStyle">
  <label for="userName"> 用户账号</label>
   <input type="text" id="userName" placeholder="请输入用户账号" key="username">
 </span>
  <span v-else>
   <label for="email"> 用户邮箱</label>
    <!--placeholder用户可见内容放在输入框内-->
   <input type="text" id="email" placeholder="请输入用户邮箱" key="email">
 </span>
  <!--用于切换的按钮-->
  <button @click="changeLogin">切换类型</button>
</div>

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key,只要key值不同，vue就不会复用。

407指导员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
登录切换案例以及input复用问题

登录切换案例以及input复用问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录切换的input复用问题</title></head><body><div id="app">  <span v-if="loginStyle
复制链接

扫一扫