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

在 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'>用戶(hù)登錄</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>

對(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' >《用戶(hù)服務(wù)協(xié)議》</a> </section></div><div :class='{on: !loginWay}'> <section> <section class='login_message'> <input type='tel' maxlength='11' placeholder='手機(jī)/郵箱/用戶(hù)名'> </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 src='http://m.b3g6.com/bcjs/images/captcha.svg' alt='captcha'> </section> </section></div>

顯示效果如下所示：

總結(jié)

到此這篇關(guān)于vue 實(shí)現(xiàn)用戶(hù)登錄方式的切換功能的文章就介紹到這了,更多相關(guān)vue 登錄方式切換內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！