快捷導(dǎo)航

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

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

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

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

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

data() {
 return {
  loginWay: true 
 }
}

在短信登錄和密碼登錄上，進行動態(tài)樣式綁定，loginWay為true就短信登錄綁定動態(tài)樣式on，loginWay為false就密碼登錄綁定動態(tài)樣式on，并且也綁定點擊事件，進行設(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>

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

<div :class="{on: loginWay}">
 <section class="login_message">
  <input type="tel" maxlength="11" placeholder="手機號">
  <button disabled="disabled" class="get_verification">獲取驗證碼</button>
 </section>
 <section class="login_verification">
  <input type="tel" maxlength="8" placeholder="驗證碼">
 </section>
 <section class="login_hint">
  溫馨提示：未注冊帳號的手機號，登錄時將自動注冊，且代表已同意
  <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="手機/郵箱/用戶名">
  </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="驗證碼">
   <img class="get_verification" src="./images/captcha.svg" alt="captcha">
  </section>
 </section>
</div>

顯示效果如下所示：

在這里插入圖片描述