對vue v-if v-else-if v-else 的簡單使用詳解
更新時間：2018年09月29日 14:32:31 作者：九寶媽咪
今天小編就為大家分享一篇對vue v-if v-else-if v-else 的簡單使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
首先vue.js請注意 2.1.0版本以上方可使用v-else-if
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.js"></script>
</head>
<body>
<div id="box">
<!--實例1 vue 2.1.0以上版本支持 v-if v-else-if -->
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<hr />
<!--實例2 v-if / v-else-->
<div v-if="type==='A'">ok!!!</div>
<div v-else>no!!!</div>
<hr />
<!--實例3 模板中使用v-if / v-else-->
<my-form :login-type="loginType"></my-form>
<button @click="toggleFun">toggle loginType</button>
</div>
<script>
var MyForm = {
//template:"#myForm"
props:['loginType'],
template:`
<div v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input"/>
</div>
<div v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input"/>
</div>
`
}
var app = new Vue({
el:'#box',// ().$mount("#box");
data:{
type:'C',
loginType:'username'
},
components:{
"my-form":MyForm
},
methods:{
toggleFun: function() {
this.loginType = this.loginType === 'username'? 'email':'username';
}
},
created:function (){
}
});
</script>
</body>
</html>
頁面展示如下：
vue.js下載：https://github.com/vuejs/vue
以上這篇對vue v-if v-else-if v-else 的簡單使用詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue-cli3 熱更新配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
下面小編就為大家分享一篇基于axios封裝fetch方法及調用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了Vue項目之學生管理系統(tǒng)實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
今天給大家介紹一款基于vue2的canvas時鐘倒計時組件，這個時鐘倒計時組件采用canvas動畫的炫酷動畫效果形式，根據(jù)剩余時間的多少變換顏色和旋轉扇形的速度，適合搶購、拍賣、下注等業(yè)務場景，且對移動端友好,需要的朋友可以參考下2018-11-11
開發(fā)中會有要獲取當前日期的需求,有的是獲取到當前月份,本文就介紹了vue獲取當前日期時間(moment、new?Date()),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-08-08
最近在做APP客戶端掃描PC端二維碼登錄,于是記錄一下實現(xiàn)過程,下面這篇文章主要給大家介紹了關于Vue?PC前端掃碼登錄功能實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue響應式原理的的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-06-06
Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟
寫后臺管理的時候會有很多列表以及相應的條件查詢,下面這篇文章主要給大家介紹了關于Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue父元素點擊事件與子元素點擊事件沖突問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別,本文通過示例代碼給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01