本文实例为大家分享了vue实现用户登录切换的具体代码，供大家参考，具体内容如下
切换有问题
代码 - <!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>
效果展示
存在问题
- 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
- 但是按道理讲，我们应该切换到另外一个input元素中了。
- 在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？
这是因为Vue在 进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用， 直接作为else中的input来使用了。
解决方案
完美版登录小案例
input里面添加不同的key
代码- <!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="用户账号" 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>
- </html>
效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持晓枫资讯。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ | 
发表于 2024-4-19 08:28:48
