欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue選項(xiàng)卡切換登錄方式小案例

 更新時(shí)間:2021年04月22日 10:33:10   作者:小羽向前跑  
這篇文章主要為大家詳細(xì)介紹了vue選項(xiàng)卡切換登錄方式小案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue選項(xiàng)卡切換登錄方式的具體代碼,供大家參考,具體內(nèi)容如下

最終效果

組件代碼:

<template>
 <div>
 <div class="login_warp">
 <div class="loginbox fl">
  <!-- 三個(gè)選項(xiàng)卡按鈕 -->
 <div class="login_header">
 <span @click="cur=0" :class="{active:cur==0}">賬號(hào)登錄</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時(shí)此板塊顯示 其他時(shí)候此板塊不顯示 -->
 <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時(shí)此板塊顯示 其他時(shí)候此板塊不顯示 -->
 <div v-show="cur==1" class="Cbody_item">
 <div class="form_item"><input type="text" name="fname" placeholder="手機(jī)號(hào)"></div>
 <div class="form_item"><input type="password" name="fpassword" placeholder="驗(yàn)證碼"></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時(shí)此板塊顯示 其他時(shí)候此板塊不顯示 -->
 <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">打開(kāi)手機(jī)客戶端掃碼注冊(cè)</div>
 </div>
 </div>
 </div>
 <!-- 右邊藍(lán)色板塊 -->
 <div class="loginrslider fl"></div>
 </div>
 </div>
</template>
 
<script>
export default {
 data () {
 return {
 cur:0 //默認(rèn)選中第一個(gè)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>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue項(xiàng)目安裝使用vconsole方式

    vue項(xiàng)目安裝使用vconsole方式

    這篇文章主要介紹了vue項(xiàng)目安裝使用vconsole方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-11-11
  • vue實(shí)現(xiàn)登錄、注冊(cè)、退出、跳轉(zhuǎn)等功能

    vue實(shí)現(xiàn)登錄、注冊(cè)、退出、跳轉(zhuǎn)等功能

    這篇文章主要介紹了vue實(shí)現(xiàn)登錄、注冊(cè)、退出、跳轉(zhuǎn)等功能,需要的朋友可以參考下
    2020-12-12
  • vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法

    vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法

    這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • 淺談Vue?DIFF

    淺談Vue?DIFF

    本文主要介紹了淺談Vue?DIFF,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • ElementUI?組件之Layout布局(el-row、el-col)

    ElementUI?組件之Layout布局(el-row、el-col)

    這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
    2024-07-07
  • 基于Vue如何封裝分頁(yè)組件

    基于Vue如何封裝分頁(yè)組件

    使用Vue做雙向綁定的時(shí)候,可能經(jīng)常會(huì)用到分頁(yè)功能,接下來(lái)通過(guò)本文給大家分享一個(gè)封裝分頁(yè)組件的方法,一起看看吧
    2016-12-12
  • 阿望教你用vue寫掃雷小游戲

    阿望教你用vue寫掃雷小游戲

    這篇文章主要介紹了阿望教你用vue寫掃雷小游戲,本文通過(guò)實(shí)例代碼效果圖展示的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-01
  • vue頁(yè)面使用多個(gè)定時(shí)器的方法

    vue頁(yè)面使用多個(gè)定時(shí)器的方法

    這篇文章主要為大家詳細(xì)介紹了vue頁(yè)面使用多個(gè)定時(shí)器的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • 如何使用HBuilderX把vue項(xiàng)目打包成apk

    如何使用HBuilderX把vue項(xiàng)目打包成apk

    這篇文章主要介紹了如何使用HBuilderX把vue項(xiàng)目打包成apk,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題

    vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題

    這篇文章主要介紹了vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03

最新評(píng)論