vue实现用户登录切换

本文实例为大家分享了vue实现用户登录切换的具体代码，供大家参考，具体内容如下

切换有问题

代码

    
    


    

        
            用户账号
            
        
        
            用户邮箱
            
        
        切换类型
    
    
    

效果展示

存在问题

• 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
• 但是按道理讲，我们应该切换到另外一个input元素中了。
• 在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案

• 给对应的input添加key
• 保证key的不同
  

完美版登录小案例

input里面添加不同的key

代码

    
    


    

        
            用户账号
            
        
        
            用户邮箱
            
        
        切换类型
    
    
    

效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。