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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python做文本按行去重的实现方法
2016/10/19 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
材料采购员岗位职责
2013/12/17 职场文书
教师辞职报告范文
2014/01/20 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
自主招生英文自荐信
2015/03/25 职场文书
慈善募捐倡议书
2015/04/27 职场文书
2019毕业论文致谢词
2019/06/24 职场文书