vue用户登录切换实现及常见问题如何处理-群英

vue用户登录切换实现及常见问题如何处��

Admin 2022-10-21 群英技术资��

这篇文章给大家分享的是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 >