vue登录功能实现,Vue前端实现用户登录功能

　　本文主要详细介绍了利用vue实现用户登录切换。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

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

　　切换有问题

　　密码

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　标题标题/标题

　　/头

　　身体

　　div id=应用程序

　　span v-if=isUser

　　=用户名用户帐户的标签/标签

　　type= text id= username placeholder=用户帐户

　　/span

　　span v-else

　　Label=“电子邮件”用户邮箱/标签

　　type= text id= email placeholder=用户邮箱

　　/span

　　button @ click= isUser=！“是”开关类型/按钮

　　/div

　　脚本src=./js/vue.js/script

　　脚本

　　const app=new Vue({

　　埃尔： #app ，

　　数据：{

　　isUser:没错

　　}

　　})

　　/脚本

　　/body

　　/html

　　效果显示

　　存在问题

　　如果我们在有输入内容的时候切换类型，会发现文本仍然显示的是之前输入的内容。

　　但从逻辑上来说，我们应该切换到另一个输入元素。

　　在另一个输入元素中，我们没有输入任何东西。

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

　　这是因为Vue为了进行DOM渲染的性能，会尽可能的重用现有的元素，而不是重新创建新的元素。

　　上述情况下，Vue会发现原来的输入元素不再使用，而是使用直接作为else中的input。

　　解决方案

　　将键添加到相应的输入中。

　　保证密钥的差异

　　完美版登录小案例

　　向输入添加不同的键。

　　代码

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　标题标题/标题

　　/头

　　身体

　　div id=应用程序

　　span v-if=isUser

　　=用户名用户帐户的标签/标签

　　Type= text id=用户名 placeholder=用户帐户 key=用户名

　　/span

　　span v-else

　　Label=“电子邮件”用户邮箱/标签

　　type= text id= email placeholder=用户邮箱 key=email

　　/span

　　button @ click= isUser=！“是”开关类型/按钮

　　/div

　　脚本src=./js/vue.js/script

　　脚本

　　const app=new Vue({

　　埃尔： #app ，

　　数据：{

　　isUser:没错

　　}

　　})

　　/脚本

　　/body

　　/html

　　效果显示

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。