Vue登录切换中的问题及解决

最新推荐文章于 2023-01-26 22:53:56 发布

原创最新推荐文章于 2023-01-26 22:53:56 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

6 篇文章

订阅专栏

用户登录切换案例

用户在登录时，可以切换使用用户账号登录或者用户邮箱登录：
类似场景：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<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>
</html>

但是，这个代码中却存在一些隐性的问题：
在切换前，在输入框中输入一些字符或者数字，在切换后却依旧存在。

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了，也就让原来输入的字符或者数据保留了下来。

解决方案：
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，并且我们需要保证key的不同。

<span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username-input">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="email-input">
  </span>
  <button @click="isUser = !isUser">切换类型</button>