在Vue中，我們有時(shí)需要根據(jù)不同的條件來(lái)決定顯示不同的內(nèi)容，這時(shí)就需要用到if指令。if指令可以根據(jù)表達(dá)式的真假來(lái)控制元素的顯示和隱藏。

<div v-if="isShow">
<p>這是要顯示的內(nèi)容</p>
</div>

如上所示，通過(guò)v-if指令來(lái)控制是否要顯示<div>元素。如果isShow的值為真，則會(huì)顯示該<div>元素，否則將不顯示。

我們也可以像下面這樣寫表達(dá)式：

<div v-if="age >= 18">
<p>你已經(jīng)成年了</p>
</div>

上述代碼表示，當(dāng)age大于等于18時(shí)，會(huì)顯示該元素。

除了v-if，Vue還提供了其他類似的指令：

• v-show：根據(jù)表達(dá)式的真假來(lái)控制元素的顯示和隱藏，但與v-if不同的是，v-show并不會(huì)在DOM中插入或移除元素，而僅僅是將元素的display樣式設(shè)置為none或block。
• v-else：用于在v-if指令的后面，表示當(dāng)v-if的表達(dá)式為假時(shí)，才會(huì)顯示該元素。
• v-else-if：用于在v-if指令的后面，表示當(dāng)v-if的表達(dá)式為假，而該指令的表達(dá)式為真時(shí)，才會(huì)顯示該元素。可以多次使用，類似于JavaScript中的else if語(yǔ)句。

下面通過(guò)一個(gè)實(shí)例來(lái)說(shuō)明各指令的區(qū)別：

<div v-if="isShow">
<p>我是v-if指令的內(nèi)容</p>
</div>
<div v-else-if="!isShow">
<p>我是v-else-if指令的內(nèi)容</p>
</div>
<div v-else>
<p>我是v-else指令的內(nèi)容</p>
</div>
<div v-show="isShow">
<p>我是v-show指令的內(nèi)容</p>
</div>

當(dāng)isShow的值為真時(shí)，會(huì)顯示v-if的內(nèi)容“我是v-if指令的內(nèi)容”，而其他三個(gè)元素都不會(huì)顯示。

當(dāng)isShow的值為假時(shí)，v-if的內(nèi)容不會(huì)顯示，而v-else-if的內(nèi)容“我是v-else-if指令的內(nèi)容”會(huì)顯示，并且其他兩個(gè)元素還是不顯示。

需要注意的是，v-if與v-show的使用場(chǎng)景不同。v-if適合在切換頻繁或開(kāi)銷較大的元素上使用，因?yàn)橹挥挟?dāng)表達(dá)式為真時(shí)才會(huì)渲染元素；而v-show適合在初始渲染開(kāi)銷較大的元素上使用，因?yàn)樵匾婚_(kāi)始就被渲染，只是設(shè)置了display:none。