本文实例为大家分享了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>
效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- vue实现用户长时间不操作自动退出登录功能的实现代码
- vue 实现用户登录方式的切换功能
- django rest framework vue 实现用户登录详解
- Vue项目使用localStorage+Vuex保存用户登录信息
- vue-router beforeEach跳转路由验证用户登录状态
- vue通过cookie获取用户登录信息的思路详解
- 使用vue-router beforEach实现判断用户登录跳转路由筛选功能
- vue路由跳转时判断用户是否登录功能的实现
- Vue中保存用户登录状态实例代码
- vue.js实现用户评论、登录、注册、及修改信息功能
本文由 华域联盟 原创撰写:华域联盟 » vue实现用户登录切换
转载请保留出处和原文链接:https://www.cnhackhy.com/59924.htm