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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 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
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
Laravel框架表单验证详解
2014/09/04 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python获取本机外网ip的方法
2015/04/15 Python
Python实现翻转数组功能示例
2018/01/12 Python
python多进程控制学习小结
2018/10/31 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
"火柴棍式"程序员面试题
2014/03/16 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
我的梦想演讲稿
2014/04/30 职场文书
岗位职责说明书模板
2014/07/30 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
对PyTorch中inplace字段的全面理解
2021/05/22 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫