vue选项卡切换登录方式小案例       这篇文章主要为大家详细介绍了vue选项卡切换登录方式小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

最终效果

组件代码：

 template 
 div 
 div 
 div 
 !-- 三个选项卡按钮 -- 
 div 
 span @click="cur=0" : 账号登录 /span 
 span @click="cur=1" : 快捷登录 /span 
 span @click="cur=2" : 扫码登录 /span 
 /div 
 div 
 !-- 在cur==0时此板块显示 其他时候此板块不显示 -- 
 div v-show="cur==0" 
 div input type="text" name="fname" placeholder="用户名" /div 
 div input type="password" name="fpassword" placeholder="密码" /div 
 div 
 div input type="checkbox" 记住密码 /div 
 div a href="javascript:;" 找回密码 /a /div 
 /div 
 div /div 
 div 
 input type="submit" name="" value="登录" 
 /div 
 /div 
 !-- 在cur==1时此板块显示 其他时候此板块不显示 -- 
 div v-show="cur==1" 
 div input type="text" name="fname" placeholder="手机号" /div 
 div input type="password" name="fpassword" placeholder="验证码" /div 
 div 
 !-- div input type="checkbox" 记住密码 /div 
 div a href="javascript:;" 找回密码 /a /div -- 
 /div 
 div /div 
 div 
 input type="submit" name="" value="登录" 
 /div 
 /div 
 !-- 在cur==2时此板块显示 其他时候此板块不显示 -- 
 div v-show="cur==2" 
 div img src="../../assets/img/qcode.png" width="160" height="160" alt="二维码" / /div 
 div 打开手机客户端扫码注册 /div 
 /div 
 /div 
 /div 
 !-- 右边蓝色板块 -- 
 div /div 
 /div 
 /div 
 /template 
 script 
export default {
 data () {
 return {
 cur:0 //默认选中第一个tab
 mounted () {
 /script 
 style scoped 
 float: left;
 float: right;
.clear{
 clear: both;
 text-decoration: none;
 color: #333;
 transition: ease all 0.5s;
 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 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。