vue怎样实现登录切换的功能？
发布时间：2022-01-11 16:46:18 所属栏目：语言 来源：互联网
导读：vue怎样实现登录切换的功能？因为一些系统的用户登录身份不同，所以需要登录切换的功能，例如师生系统的学生和教师登录，本文就给大家分享一下怎样用vue实现简单的登录切换功能。 切换有问题 代码 !DOCTYPE html html lang=en head meta charset=UTF-8 title
|
vue怎样实现登录切换的功能？因为一些系统的用户登录身份不同，所以需要登录切换的功能，例如师生系统的学生和教师登录，本文就给大家分享一下怎样用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 保证key的不同 完美版登录小案例 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>  （编辑：91站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
