怎么新建MySQL数据库
发布时间：2022-10-21
作者：admin
阅读：476
阅读：476
这篇文章给大家分享的是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用户登录切换实现及常见问题如何处理”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理