vue實(shí)現(xiàn)登錄類(lèi)型切換
更新時(shí)間：2021年04月22日 10:40:52 作者：Distance-X
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄類(lèi)型切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)登錄類(lèi)型切換的具體代碼，供大家參考，具體內(nèi)容如下
運(yùn)行效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄類(lèi)型切換</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="userAccount">用戶(hù)賬戶(hù)：</label>
<input type="text" id="userAccount" placeholder="請(qǐng)輸入賬戶(hù)" key="userAccount">
</span>
<span v-else>
<label for="userEmail">用戶(hù)郵箱：</label>
<input type="text" id="userEmail" placeholder="請(qǐng)輸入郵箱" key="userEmail">
</span>
<button @click="changeType">切換類(lèi)型</button>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
},
methods:{
changeType(){
return this.isUser = ! this.isUser
}
}
})
</script>
</html>
代碼片段解析
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue.js初學(xué)入門(mén)教程第二篇,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家介紹了Vue組件實(shí)現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vuex是一個(gè)專(zhuān)門(mén)為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex 的簡(jiǎn)單使用,需要的朋友可以參考下2018-03-03
有時(shí)，你可能希望將任意信息附加到路由上，如過(guò)渡名稱(chēng)、誰(shuí)可以訪問(wèn)路由等。這些事情可以通過(guò)接收屬性對(duì)象的meta屬性來(lái)實(shí)現(xiàn)，并且它可以在路由地址和導(dǎo)航守衛(wèi)上都被訪問(wèn)到2022-09-09
vue如何動(dòng)態(tài)設(shè)置class、動(dòng)態(tài)設(shè)置style
這篇文章主要介紹了vue如何動(dòng)態(tài)設(shè)置class、動(dòng)態(tài)設(shè)置style，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目中Element UI組件未注冊(cè)的問(wèn)題原因及解決方法
在 Vue 項(xiàng)目中使用 Element UI 組件庫(kù)時(shí),開(kāi)發(fā)者可能會(huì)遇到一些常見(jiàn)問(wèn)題,例如組件未正確注冊(cè)導(dǎo)致的警告或錯(cuò)誤,本文將詳細(xì)探討這些問(wèn)題的原因、解決方法,以及如何在需要時(shí)撤銷(xiāo)相關(guān)操作,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue-cli4 配置 element-ui 按需引入操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue對(duì)于低版本瀏覽器兼容問(wèn)題的解決思路
很多時(shí)候使用vue開(kāi)發(fā)的項(xiàng)目,由于無(wú)法在低版本瀏覽器上運(yùn)行,所以需要解決下,下面這篇文章主要給大家介紹了關(guān)于vue對(duì)于低版本瀏覽器兼容問(wèn)題的解決思路,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09