vue选项卡切换登录方式小案例


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了vue选项卡切换登录方式的具体代码,供大家参考,具体内容如下

最终效果

vue选项卡切换登录方式小案例

组件代码:

<template>
 <div>
 <div class="login_warp">
 <div class="loginbox fl">
  <!-- 三个选项卡按钮 -->
 <div class="login_header">
 <span @click="cur=0" :class="{active:cur==0}">账号登录</span>
 <span @click="cur=1" :class="{active:cur==1}">快捷登录</span>
 <span @click="cur=2" :class="{active:cur==2}">扫码登录</span>
 </div>
 <div class="login_content">
  <!-- 在cur==0时此板块显示 其他时候此板块不显示 -->
 <div v-show="cur==0" class="Cbody_item">
 <div class="form_item"><input type="text" name="fname" placeholder="用户名"></div>
 <div class="form_item"><input type="password" name="fpassword" placeholder="密码"></div>
 <div class="form_item">
 <div class="fl"><input type="checkbox">记住密码</div>
 <div class="fr"><a href="javascript:;" >找回密码</a></div>
 </div>
 <div class="clear"></div>
 <div class="form_item">
 <input type="submit" name="" value="登录">
 </div>
 </div>
  <!-- 在cur==1时此板块显示 其他时候此板块不显示 -->
 <div v-show="cur==1" class="Cbody_item">
 <div class="form_item"><input type="text" name="fname" placeholder="手机号"></div>
 <div class="form_item"><input type="password" name="fpassword" placeholder="验证码"></div>
 <div class="form_item">
 <!-- <div class="fl"><input type="checkbox">记住密码</div>
 <div class="fr"><a href="javascript:;" >找回密码</a></div> -->
 </div>
 <div class="clear"></div>
 <div class="form_item">
 <input type="submit" name="" value="登录">
 </div>
 
 </div>
  <!-- 在cur==2时此板块显示 其他时候此板块不显示 -->
 <div v-show="cur==2" class="Cbody_item">
 <div class="qcode"><img src="../../assets/img/qcode.png" width="160" height="160" alt="二维码" /></div>
 <div class="beizhu">打开手机客户端扫码注册</div>
 </div>
 </div>
 </div>
 <!-- 右边蓝色板块 -->
 <div class="loginrslider fl"></div>
 </div>
 </div>
</template>
 
<script>
export default {
 data () {
 return {
 cur:0 //默认选中第一个tab
 }
 },
 mounted () {
 
 }
}
 
</script>
 
<style scoped>
.fl{
 float: left;
}
.fr{
 float: right;
}
.clear{
 clear: both;
}
a{
 text-decoration: none;
 color: #333;
 transition: ease all 0.5s;
}
a{
 color: #1c65ff
}
.login_header{
 margin-bottom: 40px;
}
.login_header span{
 margin-right: 20px;
 cursor: pointer;
}
.loginbox{
 width: 300px;
 overflow: hidden;
 padding: 20px;
 padding-top: 15px;
}
.Cbody_item{
 border: 0px solid #999;
 overflow: hidden;
}
.form_item{
 font-size: 13px;
}
.form_item input[type="text"],.form_item input[type="password"]{
 display: block;
 width: calc(100% - 18px);
 height: 36px;
 margin:0 auto; 
 padding-left: 16px;
 outline: none;
 border: 1px solid #999;
 transition: ease all 0.5s;
 margin-bottom: 20px;
}
.form_item input[type="text"]:focus,.form_item input[type="password"]:focus{
 border: 1px solid #1c65ff
}
.form_item input[type="submit"]{
 display: block;
 width: calc(100% - 0px);
 height: 40px;
 margin:0 auto; 
 padding-left: 16px;
 outline: none;
 border: 1px solid #1c65ff;
 transition: ease all 0.5s;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: #1c65ff;
 color: #fff;
 cursor: pointer;
}
.form_item input[type="submit"]:hover{
 background-color: #3f7dff;
 border: 1px solid #3f7dff;
}
.active{
 color: #3f7dff;
 padding-bottom: 10px;
 border-bottom: 3px solid #3f7dff;
}
.loginrslider{
 width: 160px;
 height: 322px;
 background-color: #1c65ff;
}
.login_warp{
 width: 500px;
 margin: 50px auto;
 border-radius: 10px;
 box-shadow: 0 0px 0px #ccc;
 overflow: hidden;
 border:1px solid #3f7dff;
 margin-top: 10%;
 transition: ease all 0.5s;
 position: relative;
 top: 0px;
 cursor: pointer;
}
.login_warp:hover{
 top: -30px;
 box-shadow: 0 15px 21px #ccc;
}
.loginrslider{
 color: #fff;
 
}
.qcode{
 width: 160px;
 height: 160px;
 background-color: #ccc;
 margin: 0 auto;
 margin-top: 2px;
}
.beizhu{
 text-align: center;
 font-size: 13px;
 margin-top: 10px;
 color: #999
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 #Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 #Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 #Javascript
vue实现倒计时获取验证码效果
Apr 17 #Javascript
通过layer实现可输入的模态框的例子
Sep 27 #Javascript
vue调用语音播放的方法
Sep 27 #Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 #Javascript
You might like
php学习 字符串课件
2008/06/15 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
Vue中的异步组件函数实现代码
2018/07/20 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Python 实现选择排序的算法步骤
2018/04/22 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python处理document文档保留原样式
2019/09/23 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
八一建军节活动方案
2014/02/10 职场文书
促销活动计划书
2014/05/02 职场文书
摘录式读书笔记
2015/07/01 职场文书
运输公司工作总结
2015/08/11 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
python关于集合的知识案例详解
2021/05/30 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript