一、vue 实现用户登录方式的切换
在 data 当中,定义一个标识符 loginWay,用来表示是用短信登录还是密码登录,true代表短信登录,false 代表密码登录,代码如下所示:
data() { return { loginWay: true } }
在短信登录和密码登录上,进行动态样式绑定,loginWay为true就短信登录绑定动态样式on,loginWay为false就密码登录绑定动态样式on,并且也绑定点击事件,进行设置 loginWay的true和false,代码如下所示:
<h2 class="login_logo">用户登录</h2> <div class="login_header_title"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{on: loginWay}" @click="loginWay = true">短信登录</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{on: !loginWay}" @click="loginWay = false">密码登录</a> </div>
对于短信登录和密码登录的内容,同样也设置动态样式绑定。当为loginWay为true 的时候设置短信登录为on,当为loginWay为false 的时候设置密码登录为on,代码如下所示:
<div :class="{on: loginWay}"> <section class="login_message"> <input type="tel" maxlength="11" placeholder="手机号"> <button disabled="disabled" class="get_verification">获取验证码</button> </section> <section class="login_verification"> <input type="tel" maxlength="8" placeholder="验证码"> </section> <section class="login_hint"> 温馨提示:未注册帐号的手机号,登录时将自动注册,且代表已同意 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《用户服务协议》</a> </section> </div> <div :class="{on: !loginWay}"> <section> <section class="login_message"> <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名"> </section> <section class="login_verification"> <input type="tel" maxlength="8" placeholder="密码"> <div class="switch_button off"> <div class="switch_circle"></div> <span class="switch_text">...</span> </div> </section> <section class="login_message"> <input type="text" maxlength="11" placeholder="验证码"> <img class="get_verification" src="/UploadFiles/2021-04-02/captcha.svg">显示效果如下所示:
总结
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue 实现用户登录方式的切换功能”评论...
更新动态
20240524
20240524
- 陈升.2000-思念人之屋2CD【滚石】【WAV+CUE】
- 叶倩文《动情的倾诉式唱腔 面对面》[WAV+CUE][540MB]
- 李宗盛《希望》[WAV+CUE][130MB]
- 《QQ音乐.热歌榜 TOP300首 2024.03.01期》[FLAC/分轨][9.5GB]
- 群星1990-36首环绕对唱连串曲3CD[鹤鸣唱片][WAV+CUE]
- 魏松2003-跟你走·中国歌曲作品[柏菲][WAV+CUE]
- 群星2005-民歌大联唱2CD[九洲][WAV+CUE]
- 伍思凯.1996-你爱谁【点将】【WAV+CUE】
- 黎明.1997-THE.WORLD.OF.LEON.LAI【宝丽金】【WAV+CUE】
- 江美琪.2002-再一次也好【维京】【WAV+CUE】
- 邓紫棋2022-永示录2CD致天堂的信[GNATION][WAV+CUE]
- [发烧女声]丁悦《19》24BIT192KHZ[WAV+CUE]
- 俞丽拿-沈榕《梁山伯与祝英台(50周年纪念珍藏版)》2CD[正版CD低速原抓WAV+CUE]
- 张学友2024《张学友情深精选》][FLAC分轨][537M]
- 红音堂《发烧示范碟》6CD[WAV分轨][3.5G]