一、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' : @click='loginWay = true'>短信登錄</a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' : @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 src='http://www.leifengta.com.cn/bcjs/images/captcha.svg' alt='captcha'> </section> </section></div>

顯示效果如下所示：

總結

到此這篇關于vue 實現用戶登錄方式的切換功能的文章就介紹到這了,更多相關vue 登錄方式切換內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！