账号登录和短信验证登录的用户登录方式相互切换的实现方法

您所在的位置:网站首页 布格缪勒op105no2 账号登录和短信验证登录的用户登录方式相互切换的实现方法

账号登录和短信验证登录的用户登录方式相互切换的实现方法

2023-11-29 06:06| 来源: 网络整理| 查看: 265

随时移到互联的快速发展,在网站建设中会越来越多的和手机互动和发送验证信息。今天绵阳动力网络就和大家聊一聊关于:账号登录和短信验证登录相互切换的实现方法。在传统的网站中登录方式都是用账号和密码来登录,但随着移动互联的快速发展,直接使用短信验证来登录也就很有必,那我们该如何将传统和创新相结合呢?这就是我们今天要聊的主题:

首选我们先看一下登录界面的最终效果:

其次是具体实施的步骤和相关代码:

为了实现这个效果,我们采用vue 实现用户登录方式的切换。在 data 当中,定义一个标识符 loginWay,用来表示是用短信登录还是密码登录,true代表短信登录,false 代表密码登录,代码如下所示:

data() { return { loginWay: true } }

在短信登录和密码登录上,进行动态样式绑定,loginWay为true就短信登录绑定动态样式on,loginWay为false就密码登录绑定动态样式on,并且也绑定点击事件,进行设置 loginWay的true和false,代码如下所示:

用户登录 短信登录 密码登录

对于短信登录和密码登录的内容,同样也设置动态样式绑定。当为loginWay为true 的时候设置短信登录为on,当为loginWay为false 的时候设置密码登录为on,代码如下所示:

获取验证码 温馨提示:未注册帐号的手机号,登录时将自动注册,且代表已同意 《用户服务协议》 ... 好了,通过以上三步就可以实现登录方式的切换了,如果你正好需要就赶紧加到你的网站中吧。


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3