vue如何實現(xiàn)選項卡切換登錄方式

這篇文章主要為大家展示了“vue如何實現(xiàn)選項卡切換登錄方式”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue如何實現(xiàn)選項卡切換登錄方式”這篇文章吧。

最終效果

組件代碼：

<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>

以上是“vue如何實現(xiàn)選項卡切換登錄方式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！