用户登录
用户注册

分享至

vue实现用户登录切换

  • 作者: 不是二是四
  • 来源: 51数据库
  • 2021-07-30

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

切换有问题

代码

效果展示

存在问题

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

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

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

解决方案

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

完美版登录小案例

input里面添加不同的key

代码

效果展示

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

软件
前端设计
程序设计
Java相关