vue 實(shí)現(xiàn)用戶登錄方式的切換功能

更新時(shí)間：2020年04月14日 15:11:49 作者：舊城tk

這篇文章主要介紹了vue 實(shí)現(xiàn)用戶登錄方式的切換功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、vue 實(shí)現(xiàn)用戶登錄方式的切換

在 data 當(dāng)中，定義一個(gè)標(biāo)識(shí)符 loginWay，用來(lái)表示是用短信登錄還是密碼登錄，true代表短信登錄，false 代表密碼登錄，代碼如下所示：

data() {
 return {
  loginWay: true 
 }
}

在短信登錄和密碼登錄上，進(jìn)行動(dòng)態(tài)樣式綁定，loginWay為true就短信登錄綁定動(dòng)態(tài)樣式on，loginWay為false就密碼登錄綁定動(dòng)態(tài)樣式on，并且也綁定點(diǎn)擊事件，進(jìn)行設(shè)置 loginWay的true和false，代碼如下所示：

<h2 class="login_logo">用戶登錄</h2>
 <div class="login_header_title">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{on: loginWay}" @click="loginWay = true">短信登錄</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{on: !loginWay}" @click="loginWay = false">密碼登錄</a>
 </div>

對(duì)于短信登錄和密碼登錄的內(nèi)容，同樣也設(shè)置動(dòng)態(tài)樣式綁定。當(dāng)為loginWay為true 的時(shí)候設(shè)置短信登錄為on，當(dāng)為loginWay為false 的時(shí)候設(shè)置密碼登錄為on，代碼如下所示：

<div :class="{on: loginWay}">
 <section class="login_message">
  <input type="tel" maxlength="11" placeholder="手機(jī)號(hào)">
  <button disabled="disabled" class="get_verification">獲取驗(yàn)證碼</button>
 </section>
 <section class="login_verification">
  <input type="tel" maxlength="8" placeholder="驗(yàn)證碼">
 </section>
 <section class="login_hint">
  溫馨提示：未注冊(cè)帳號(hào)的手機(jī)號(hào)，登錄時(shí)將自動(dòng)注冊(cè)，且代表已同意
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《用戶服務(wù)協(xié)議》</a>
 </section>
</div>
<div :class="{on: !loginWay}">
 <section>
  <section class="login_message">
   <input type="tel" maxlength="11" placeholder="手機(jī)/郵箱/用戶名">
  </section>
  <section class="login_verification">
   <input type="tel" maxlength="8" placeholder="密碼">
   <div class="switch_button off">
    <div class="switch_circle"></div>
    <span class="switch_text">...</span>
   </div>
  </section>
  <section class="login_message">
   <input type="text" maxlength="11" placeholder="驗(yàn)證碼">
   <img class="get_verification" src="./images/captcha.svg" alt="captcha">
  </section>
 </section>
</div>

顯示效果如下所示：

在這里插入圖片描述