本文实例为大家分享了 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 >
效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_44635198/article/details/113654813
dy("nrwz");