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(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
js实现全选和全不选功能
Jul 28 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
jquery动态添加删除(tr/td)
2015/02/09 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
python基础教程之Hello World!
2014/08/29 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
销售业务实习自我鉴定
2013/09/23 职场文书
校运会广播稿100字
2014/01/27 职场文书
青年文明号服务承诺
2014/03/31 职场文书
低碳环保口号
2014/06/12 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
防止web项目中的SQL注入
2021/12/06 MySQL
JavaScript流程控制(循环)
2021/12/06 Javascript