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


Posted in Javascript onApril 14, 2020

一、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>

显示效果如下所示:

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

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

总结

到此这篇关于vue 实现用户登录方式的切换功能的文章就介绍到这了,更多相关vue 登录方式切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
JS作用域深度解析
Dec 29 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 #Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 #Javascript
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
Vue.js用法详解
2017/11/13 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
python连接池实现示例程序
2013/11/26 Python
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python3.4中清屏的处理方法
2020/07/06 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python中remove函数的踩坑记录
2021/01/04 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
2015年前台接待工作总结
2015/05/04 职场文书
胡桃夹子观后感
2015/06/11 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书