vue 实现用户登录方式的切换功能

所属分类: 网络编程 / JavaScript 阅读数: 1102
收藏 0 赞 0 分享

一、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="./images/captcha.svg" alt="captcha">
  </section>
 </section>
</div>

显示效果如下所示:

在这里插入图片描述

在这里插入图片描述 

更多精彩内容其他人还在看

从新浪弄下来的全屏广告代码 与使用说明

从新浪弄下来的全屏广告代码 与使用说明
收藏 0 赞 0 分享

用js实现预览待上传的本地图片

用js实现预览待上传的本地图片
收藏 0 赞 0 分享

用javascript自动显示最后更新时间

用javascript自动显示最后更新时间
收藏 0 赞 0 分享

表单提交时自动复制内容到剪贴板的js代码

表单提交时自动复制内容到剪贴板的js代码
收藏 0 赞 0 分享

用roll.js实现的图片自动滚动+鼠标触动的特效

用roll.js实现的图片自动滚动+鼠标触动的特效
收藏 0 赞 0 分享

一段js小代码,计算距春节还有多少天

一段js小代码,计算距春节还有多少天
收藏 0 赞 0 分享

js中设计一段程序,让它能够打印自己的方法收集藏

js中设计一段程序,让它能够打印自己的方法收集藏
收藏 0 赞 0 分享

自动生成文章摘要的代码[JavaScript 版本]

自动生成文章摘要的代码[JavaScript 版本]
收藏 0 赞 0 分享

动态生成js类的实现方法

动态生成js类的实现方法
收藏 0 赞 0 分享

绝对经典的滑轮新闻显示(javascript+css)实现

这篇文章主要介绍了绝对经典的滑轮新闻显示(javascript+css)实现,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多