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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了vue.js初學入門教程第二篇,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家介紹了Vue組件實現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vuex是一個專門為vue.js設計的集中式狀態(tài)管理架構。這篇文章主要介紹了vuex 的簡單使用,需要的朋友可以參考下2018-03-03
有時，你可能希望將任意信息附加到路由上，如過渡名稱、誰可以訪問路由等。這些事情可以通過接收屬性對象的meta屬性來實現(xiàn)，并且它可以在路由地址和導航守衛(wèi)上都被訪問到2022-09-09
vue如何動態(tài)設置class、動態(tài)設置style
這篇文章主要介紹了vue如何動態(tài)設置class、動態(tài)設置style，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項目中Element UI組件未注冊的問題原因及解決方法
在 Vue 項目中使用 Element UI 組件庫時,開發(fā)者可能會遇到一些常見問題,例如組件未正確注冊導致的警告或錯誤,本文將詳細探討這些問題的原因、解決方法,以及如何在需要時撤銷相關操作,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue-cli4 配置 element-ui 按需引入操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
很多時候使用vue開發(fā)的項目,由于無法在低版本瀏覽器上運行,所以需要解決下,下面這篇文章主要給大家介紹了關于vue對于低版本瀏覽器兼容問題的解決思路,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09