怎样解决使用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 > 到此，关于“vue用户登录切换实现及常见问题如何处理”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章! （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
