vue實現(xiàn)登錄類型切換
更新時間：2021年04月22日 10:40:52 作者：Distance-X
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄類型切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)登錄類型切換的具體代碼，供大家參考，具體內(nèi)容如下
運行效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄類型切換</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="userAccount">用戶賬戶：</label>
<input type="text" id="userAccount" placeholder="請輸入賬戶" key="userAccount">
</span>
<span v-else>
<label for="userEmail">用戶郵箱：</label>
<input type="text" id="userEmail" placeholder="請輸入郵箱" key="userEmail">
</span>
<button @click="changeType">切換類型</button>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
},
methods:{
changeType(){
return this.isUser = ! this.isUser
}
}
})
</script>
</html>
代碼片段解析
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue中使用v-if隱藏元素時會出現(xiàn)閃爍問題的解決
這篇文章主要介紹了vue中使用v-if隱藏元素時會出現(xiàn)閃爍問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了Vuejs Prop基本用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vue實現(xiàn)記住賬號密碼功能,用戶登錄時若勾選“記住我”功能選項，則將登錄名和密碼（加密后）存入本地緩存，下次登錄頁面加載時自動獲取保存好的賬號和密碼（需解密），回顯到登錄輸入框中，下面分享我實現(xiàn)的具體步驟，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue駝峰與短橫線分割命名中的注意事項，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
這篇文章主要給大家介紹了關(guān)于vue中如何使用$emit傳遞多個參數(shù)的2種方法,在Vue中可以使用$emit方法向父組件傳遞數(shù)據(jù),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實現(xiàn),還發(fā)現(xiàn)一種方法可以實現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了Vue DevTools調(diào)試工具的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue項目無法刪除的問題及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue通過指令(directives)實現(xiàn)點擊空白處收起下拉框
這篇文章主要介紹了vue通過指令(directives)實現(xiàn)點擊空白處收起下拉框，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12