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

上一篇：Vue中怎样做下划滚动加载数据的效果？下一篇：用JS怎样写添加表格和删除功能，代码是什么

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