登录切换小案例_登录切换用户案例-CSDN博客

本文链接：https://blog.csdn.net/vfjcgg/article/details/106615667

登录切换小案例

条件渲染案例

我们来做一个简单的小案例
用户在登录时，可以切换使用用账号登录还是邮箱地址登录。

案例小问题：

小问题
1.如果我们有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入内容。
2.但是按道理讲，我们应该切换到另一个input元素中了。
3.在另一个input元素中，我们并没有输入内容。
4.为什么会出现这个问题呢？

问题解答
1.这是因为Vue在进行DOM渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
2.在下面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<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="../2020-6/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好！',
      isUser: true,
    }
  })


</script>
</body>
</html>