在字符串模板中,如 Handlebars,我們得像這樣寫一個(gè)條件塊:
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
在 Vue.js,我們使用 v-if
指令實(shí)現(xiàn)同樣的功能:
<h1 v-if="ok">Yes</h1>
也可以用 v-else
添加一個(gè) "else" 塊:
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
因?yàn)?v-if
是一個(gè)指令,需要將它添加到一個(gè)元素上。但是如果我們想切換多個(gè)元素呢?此時(shí)我們可以把一個(gè) <template>
元素當(dāng)做包裝元素,并在上面使用 v-if
,最終的渲染結(jié)果不會(huì)包含它。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
另一個(gè)根據(jù)條件展示元素的選項(xiàng)是 v-show
指令。用法大體上一樣:
<h1 v-show="ok">Hello!</h1>
不同的是有 v-show
的元素會(huì)始終渲染并保持在 DOM 中。v-show
是簡(jiǎn)單的切換元素的 CSS 屬性 display
。
注意 v-show
不支持 <template>
語法。
可以用 v-else
指令給 v-if
或 v-show
添加一個(gè) "else 塊":
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
v-else
元素必須立即跟在 v-if
或 v-show
元素的后面——否則它不能被識(shí)別。
在切換 v-if
塊時(shí),Vue.js 有一個(gè)局部編譯/卸載過程,因?yàn)?v-if
之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if
是真實(shí)的條件渲染,因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if
也是惰性的:如果在初始渲染時(shí)條件為假,則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯(編譯會(huì)被緩存起來)。
相比之下,v-show
簡(jiǎn)單得多——元素始終被編譯并保留,只是簡(jiǎn)單地基于 CSS 切換。
一般來說,v-if
有更高的切換消耗而 v-show
有更高的初始渲染消耗。因此,如果需要頻繁切換 v-show
較好,如果在運(yùn)行時(shí)條件不大可能改變 v-if
較好。