一、vue 實現使用者登入方式的切換

在 data 當中，定義一個識別符號 loginWay，用來表示是用簡訊登入還是密碼登入，true代表簡訊登入，false 代表密碼登入，程式碼如下所示：

data() {
 return {
  loginWay: true 
 }
}

在簡訊登入和密碼登入上，進行動態樣式繫結，loginWay為true就簡訊登入繫結動態樣式on，loginWay為false就密碼登入繫結動態樣式on，並且也繫結點選事件，進行設定 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>

對於簡訊登入和密碼登入的內容，同樣也設定動態樣式繫結。當為loginWay為true 的時候設定簡訊登入為on，當為loginWay為false 的時候設定密碼登入為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" >《使用者服務協議》</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>

顯示效果如下所示：

總結

到此這篇關於vue 實現使用者登入方式的切換功能的文章就介紹到這了,更多相關vue 登入方式切換內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！