一、條件渲染

v-if

v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回真值時(shí)才被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

v-else

你也可以使用 v-else 為 v-if 添加一個(gè)“else 區(qū)塊”。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>

v-else-if

v-else-if 提供的是相應(yīng)于 v-if 的“else if 區(qū)塊”。它可以連續(xù)多次重復(fù)使用：

<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 類似，一個(gè)使用 v-else-if 的元素必須緊跟在一個(gè) v-if 或一個(gè) v-else-if 元素后面。

<template> 上的 v-if

因?yàn)?v-if 是一個(gè)指令，他必須依附于某個(gè)元素。但如果我們想要切換不止一個(gè)元素呢？在這種情況下我們可以在一個(gè) 元素上使用 v-if，這只是一個(gè)不可見(jiàn)的包裝器元素，最后渲染的結(jié)果并不會(huì)包含這個(gè) 元素。

<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p>
</template>

v-else 和 v-else-if 也可以在 上使用。

v-show

用來(lái)按條件顯示一個(gè)元素的指令是 v-show。其用法基本一樣：

<h1 v-show="ok">Hello!</h1>

不同之處在于 v-show 會(huì)在 DOM 渲染中保留該元素；v-show 僅切換了該元素上名為 display 的 CSS 屬性。

v-show 不支持在 元素上使用，也不能和 v-else 搭配使用。

二、區(qū)別：

渲染區(qū)別

• v-show 是通過(guò)控制display屬性來(lái)進(jìn)行dom的顯示與隱藏
• v-if 是真正意義上的條件渲染，為true是渲染（dom存在），為false時(shí)不存在（dom不存在）

性能區(qū)別：

• v-if有更高的切換開(kāi)銷，v-show有更高的初始渲染開(kāi)銷。
  如果需要頻繁的切換，使用v-show比較好，如果運(yùn)行條件很少改變，使用v-if比較好。
• v-show比v-if性能更高，因?yàn)関-show只能動(dòng)態(tài)的改變樣式，不需要增刪DOM元素。
  所以當(dāng)程序不是很大時(shí)候，v-if和v-show區(qū)別都不大，如果項(xiàng)目很大，推薦多用v-show，較少瀏覽器后期操作的性能。
• 需要多種條件場(chǎng)景，比如id=1，=2，=3…時(shí)候，因?yàn)橹挥衯-if，可以和v-else等連用，這種比較適合用v-if
• v-show不支持語(yǔ)法
• v-if切換的時(shí)候會(huì)實(shí)時(shí)的銷毀和重建內(nèi)部的事件、鉤子函數(shù)等，v-show只會(huì)初始化渲染時(shí)候執(zhí)行，再切換時(shí)候不會(huì)執(zhí)行生命后期的過(guò)程。

三、注意事項(xiàng)

永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上，帶來(lái)性能方面的浪費(fèi)（每次渲染都會(huì)先循環(huán)再進(jìn)行條件判斷）