8 條件渲染第 2 部分（v-if和v-show） · JavaBeginnersTutorial 中文系列教程

# 8 條件渲染第 2 部分（`v-if`和`v-show`） > 原文： [https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/](https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/) 我們是否沒有足夠的指令來處理條件渲染？我們還需要`v-show`嗎？還有另一件事困擾我們的大腦嗎？但是該怎么辦？我們忙于觀看 Netflix 時，Evan You（Vue 的創建者）出于某種原因添加了它。因此，讓我們看看為什么該指令首先存在。 *警告*：這篇文章是“[條件渲染第 1 部分](https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/)”的繼續，因此，我建議您在繼續進行之前先充分了解這些概念。我們討論了`v-if`，`v-else`等不僅可以應用于單個 HTML 元素，而且可以應用于使用`<div>`或`<template>`等的元素塊。讓我們首先來看一個帶有`<template>`元素的示例，并了解它作為*不可見包裝器*的行為，以最終結果呈現給 DOM。 ## 使用`<template>`元素讓我們在`<template>`元素內包裝標題和段落，并使用`v-if`指令為其指定條件。除此之外，我們還要添加沒有任何條件的另一段。首先，將`display`屬性添加到 Vue 實例的數據對象，并為其賦予`true`值。 ```js data: { display: true } ``` 其次，對`index.html`文件進行以下更改， ```js <template v-if="display"> <h1>Welcome</h1> <p>Hi there!</p> </template> <p>How are you doing?</p> ``` 如果由于`display`設置為`true`而看到了輸出，則`if`條件求值為`true`，并顯示模板塊中的元素。 ![v-if template block](https://img.kancloud.cn/78/a1/78a1eeaef3974bd7e129c8da9406c988_520x532.png) 這里有趣的是，如果您打開瀏覽器的**開發人員工具**（在 Chrome 瀏覽器中為`Ctrl + Shift + I`或`F12`），然后在元素標簽中，`<template>`元素將不包含。它神奇地變成了**不可見的**！ ![developer tools](https://img.kancloud.cn/b7/1a/b71aed3f77ab3e4c0572a97df5579e86_329x433.png) **注意：** *當`v-if`條件的值為`false`時，整個元素將從 DOM 中分離/刪除。當在我們的應用中不需要某個元素時，這通常是首選的行為，因為 DOM 中包含較少的元素會提高其性能。* ## `v-show`指令作為開發人員的生活是如此變幻莫測！我們經常遇到需要頻繁顯示和隱藏元素的情況，即在網頁上打開和關閉。在這種情況下，最好使用`v-show`指令。 ### 使用`v-show`的原因該指令將確保 DOM 中始終存在**元素**。將顯示條件是否為真（求值為`true`）。當條件求值為`false`時，該元素將通過自動添加 CSS 屬性`display: none`來隱藏！聽起來不有趣嗎？這個概念可能很難纏住我們的頭腦。不用擔心，我已經覆蓋了你。示例和屏幕截圖可為我們提供幫助！在前面的示例中，讓我們將`v-show`指令添加到第二段標簽中。 ```html <p v-show="display">How are you doing?</p> ``` 當`display`為`true`時，`v-if`和`v-show`的行為類似。瀏覽器輸出和開發人員工具顯示的結果與以前相同（請參閱“使用`template`元素”標題下顯示的兩個圖像）。這里沒有驚喜！讓我們將`display`屬性的值更改為`false`。我們完整的代碼如下所示： #### `Index.js` ```jsscript var app = new Vue({ el: "#app", data: { display: false } }); ``` #### `Index.html` ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <template v-if="display"> <h1>Welcome</h1> <p>Hi there!</p> </template> <p v-show="display">How are you doing?</p> </div>  <script src="index.js"></script> </body> </html> ``` 順便說一句，讓我們繼續查看瀏覽器的輸出和開發人員工具的結果。 ![v-show hidden](https://img.kancloud.cn/04/5c/045cc986127c6bfd455208d79c9f0558_652x501.png) 不出所料，由于`v-if`和`v-show`條件都求值為`false`，因此沒有任何內容呈現給網頁。這里也沒有什么魔術。但是，當我們打開開發人員工具并仔細查看“元素”窗格時，有很多東西需要解碼。 1. 具有`v-if`偽指令的`<template>`元素（包含`<h1>`和`<p>`元素）在求值為`false`時，已從 DOM 中刪除了。 2. 僅具有`v-show`指令的第二個`<p>`元素**使用 CSS `display`屬性切換元素的可見性**。元素始終附加到 DOM，并且始終顯示。它只是變得不可見。就這樣！ ### 當心！由于不支持將`v-show`與`<template>`元素一起使用，因此無法使用。另外，它不適用于`v-else`（`if`和`else`是靈魂伴侶，你知道嗎？！不是，`show`和`else`！） ### 那么，我應該使用`v-if`或`v-show`嗎？好問題！如果您想**切換**，通常將**經常切換**，因為 DOM 中始終存在該元素，請使用`v-show`，無論初始條件是否為`true`或`false`。借助 CSS `display`屬性只能切換可見性。因此，初始渲染成本較高。如果**元素**的狀態不經常更改/切換**，尤其是在運行時，請使用`v-if`。因為在這里附加和分離元素通常會變得昂貴。另外，請記住，`v-if`是**惰性的**，即，如果條件在初次渲染時求值為`false`，則直到條件變為`true`時，元素或塊才會被渲染。還在頭上有霧嗎？不用擔心！練習是這里的關鍵。抓住巫師的帽子和魔杖，嘗試一些咒語（示例場景），您將掌握它！順便說一下，以上討論的所有代碼都可以在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中找到。祝您有美好的一天！