2.2　條件渲染

2.2.1　v-show

v-show指令可以根據(jù)條件展示元素，代碼如下：

帶有v-show的元素始終會被渲染并保留在DOM中，v-show只是通過簡單地切換元素CSS屬性display：none實現(xiàn)的。例如，將上面的代碼v-show的值設(shè)置為false，代碼如下：

在瀏覽器中運行的效果如圖2.6所示。

2.2.2　v-if與v-else-if

v-if和v-show都可以實現(xiàn)條件渲染，但是v-if與v-show不同的是，v-if不是通過切換CSS屬性實現(xiàn)顯示與隱藏的，當(dāng)v-if的值為false時，帶有v-if的DOM元素就不會被渲染出來。v-if和v-show最大的不同就是，v-if不僅可以單獨使用，還可以和v-else-if、v-else指令配合使用，類似于JavaScript中的if-else、if-else-if語句。

1．v-if

v-if用于條件性地渲染一部分內(nèi)容。這部分內(nèi)容只會在指令的表達(dá)式返回值為true的時候才被渲染。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.7所示。

2．v-else-if

v-else-if指令類似于條件語句中的“else-if塊”，可以與v-if配合使用。

index.html文件代碼如下：

上面代碼在瀏覽器中運行的結(jié)果為B，這里需要注意的是，v-else-if指令不能單獨使用，必須跟在帶有v-if或v-else-if的元素之后。

3．v-if和v-show的區(qū)別

v-if與v-show指令都可以根據(jù)表達(dá)式的值來控制元素的顯示與隱藏狀態(tài)。

v-if相比于v-show，更“真實”地實現(xiàn)了元素的渲染與移除，但是在頻繁的切換過程中，使DOM元素不斷地在內(nèi)存中重建與銷毀，這樣便增加了內(nèi)存的開銷。

v-show是更簡單的一種切換顯示與隱藏狀態(tài)的操作，只是修改了CSS屬性中display的值，無論顯示與隱藏，DOM元素始終被渲染。

綜上所述，如果需要在頁面中頻繁地切換某個元素的顯示狀態(tài)，推薦使用v-show指令；如果在運行時條件很少改變，則推薦使用v-if指令。

2.2.3　v-else

在根據(jù)條件渲染DOM元素時，還可以使用v-else指令來表示“else塊”，類似于JavaScript中的if-else邏輯語句。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.8所示。

2.2.4　在<template>元素上使用v-if條件渲染分組

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

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.9所示。

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

Vue會盡可能高效地渲染元素，通常會復(fù)用已有元素而不是從頭開始渲染。這樣做除了使Vue的執(zhí)行速度變得非常快之外，還有其他一些作用。例如，允許用戶在不同的登錄方式之間切換。

index.html文件代碼如下：

在瀏覽器中運行，首先在輸入框中輸入“張三”，如圖2.10所示，然后單擊“切換”按鈕，可以看到郵箱中顯示的是“張三”，如圖2.11所示。

在上面的示例中，切換狀態(tài)并不會清空用戶已經(jīng)輸入的內(nèi)容，因為兩個模板使用了相同的元素，<input>不會被替換掉，只是替換了它的placeholder屬性。

這樣也不總是符合實際需求，所以Vue提供了一種方式來表達(dá)“這兩個元素是完全獨立的，不要復(fù)用它們”。只需添加一個具有唯一值的key屬性。

index.html文件代碼如下：

在瀏覽器中運行，首先在輸入框中輸入“張三”，如圖2.12所示，然后單擊“切換”按鈕，可以看到郵箱中的值為默認(rèn)的placeholder屬性的值，如圖2.13所示。