v-if指令用于條件性的渲染一塊內(nèi)容，這部分內(nèi)容只會在指令表達式返回true的時候被渲染蚪战。

<div v-if="awesome">顯示div</div>
data() {
    return {
        awesome:true,
    }
},

也可以使用v-else添加一個else塊：

<div v-if="awesome">顯示div</div>
<div v-else>否則是這個</div>
data() {
    return {
        awesome:true,
    }
},

在元素上使用條件渲染分組

因為v-if是一個指令，所以必須將它添加到元素上梯澜。但是如果想切換多個元素千康？此時可以把一個<template>元素當(dāng)做不可見的包裹元素，并在上面使用v-if剿吻。最終的渲染結(jié)果將不包含<template>元素。

<block  v-if="awesome">
    <div>顯示div</div>
</block>
data() {
    return {
        awesome:true,
    }
},

可以使用v-else指令來表示v-if的else塊：

<div v-if="Math.random() > 0.5">
  妖鬼現(xiàn)形吧
</div>
<div v-else>
  千年老妖
</div>

v-else元素必須緊跟在帶v-if或者v-else-if的元素后面串纺，否則他將不會被識別丽旅。

v-else-if充當(dāng)v-if的"else-if"塊，可以連續(xù)使用：

<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>

類似于v-else,v-else-if也必須緊跟在帶v-if或者v-else-if的元素之后纺棺。
?

用 管理可復(fù)用的元素

Vue會復(fù)用已有元素而不是從頭開始渲染,使得非抽希快之外還有一些其他好處。如：在不同登錄方式之間切換：

<template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="請輸入用戶名">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="請輸入郵箱">
  </template>
  <button @click="changeLogin">切換登錄</button>

//邏輯處理
data() {
  return {
        loginType:'username',
     }
  },
  methods:{
    changeLogin(){
        if(this.loginType === "username"){
            this.loginType = 'email';
        }else{
            this.loginType = 'username';
        }
    }
 }

在上面的例子中：切換loginType不會清楚用戶已經(jīng)輸入的內(nèi)容祷蝌。因為兩個模板使用了相同的元素茅撞，<input>不會被替換掉——僅僅是替換了它的placeholder.

這樣是不符合實際要求的：所以vue提供了一種方式來表達“這兩個元素是安全獨立的，不要復(fù)用他們”巨朦。只需添加一個具有唯一值的key屬性即可

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="請輸入用戶名" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="請輸入郵箱" key="email-input">
</template>
<button @click="changeLogin">切換登錄</button>

注意米丘，<lable>元素仍然會被高效的復(fù)用，因為他沒有key屬性罪郊。

另一個用于根據(jù)條件展示元素的選項是v-show指令。

<div v-show="flag">是否顯示</div>
data() {
    return {
        flag:false,
    }
},

v-show和v-if不同點：
v-show修飾的元素始終會被渲染并保留在DOM中尚洽。只是簡單的切換元素的css樣式display悔橄。
v-if可以控制元素是否被渲染（而不是已經(jīng)渲染之后，在控制隱藏狀態(tài)）。

v-show不支持<template>元素癣疟，也不支持v-else.

?

vs

v-if 是“真正”的條件渲染挣柬，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假睛挚，則什么也不做——直到條件第一次變?yōu)檎鏁r邪蛔，才會開始渲染條件塊。

相比之下扎狱，v-show 就簡單得多——不管初始條件是什么侧到，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換淤击。

一般來說匠抗，v-if有更高的切換開銷，而 v-show 有更高的初始渲染開銷污抬。因此汞贸，如果需要非常頻繁地切換，則使用 v-show 較好印机；如果在運行時條件很少改變矢腻，則使用 v-if 較好。

?

和 一起使用

不推薦同時使用v-if和v-for射赛。

當(dāng)v-if與v-for一起使用時多柑，v-for具有比v-if更高的優(yōu)先級。