介紹

之前一段時間由于工作很忙，沒有時間繼續學習Vue，今天算是繼續對之前的學習進行補充了，今天要學習的便是Vue的條件渲染和列表渲染，我們將討論if、if-else、if-else-if，show等。在列表渲染中，我們將討論如何使用for循環。

---

---

條件渲染

對于條件渲染，其概念就是滿足條件的渲染界面輸出，在Vue中借助if，if-else，if-else-if，show等的幫助下完成條件檢查,我們首先通過一個實例來解釋條件渲染的細節

---

---

瀏覽器效果

---

---

在上面的例子中，我們創建了一個按鈕和兩個帶有消息的h1標簽。聲明了一個名為show的變量，并將其初始化為值true。它顯示在按鈕附近。在單擊按鈕時，我們調用方法showdata，它切換變量show的值。這意味著在單擊按鈕時，變量show的值將從true變為false，false變為true。我們已將if分配給h1標記，如以下代碼段所示。

Click Me

這是H1標簽

---

現在它將做的是，它將檢查變量show的值，如果它是真的，將顯示h1標簽。單擊按鈕并在瀏覽器中查看，因為show變量的值更改為false，h1標記不會顯示在瀏覽器中。僅在show變量為true時顯示。

以下是瀏覽器中的顯示。

---

---

我們看下瀏覽器中dom的變化情況

---

---

變為false時，h1已經不見了

---

---

下面是使用了if-else的示例

---

---

主要就是這段代碼：

這是H1標簽

這是H2標簽

---

現在，如果show為true，將顯示“這是H1標簽”，如果為false，則顯示“這是H2標簽”。這是我們將在瀏覽器中獲得的內容。

---

---

點擊按鈕后變化

---

---

接下來是v-show的示例

---

---

v-show的行為與v-if相同。它還根據分配給它的條件顯示和隱藏元素。v-if和v-show之間的區別在于v-if如果條件為false則從DOM中刪除HTML元素，如果條件為真則將其添加回來。而v-show隱藏了元素，如果條件為false，則display：none。如果條件為真，它會顯示元素返回。因此，元素始終存在于dom中。

列表渲染

• v-for

現在讓我們使用v-for指令進行列表渲染

---

---

名為items的變量聲明為數組。在方法中，有一個名為showinputvalue的方法，它被分配給帶有水果名稱的輸入框。在該方法中，使用以下代碼將輸入文本框內的水果添加到數組中

showinputvalue : function(event) { this.items.push(event.target.value);}

---

我們使用v-for來顯示輸入的水果，如下面的代碼片段所示。V-for迭代數組中存在的值。

• {{a}}

---

要使用for循環迭代數組，我們必須使用v-for = "a in items"，其中a保存數組中的值并顯示直到所有項都完成。我們看下瀏覽器輸出：

---

---

嘗試輸入一些水果名稱：

---

---

Dom代碼對比

---

---

如果我們希望顯示數組的索引，則使用以下代碼完成：

---

---

主要代碼如下

{{index}}--{{a}}

---

瀏覽器效果如下

---

---

總結

以上就是對Vue中的條件渲染和列表渲染的介紹，非常的簡單，但是越是簡單的東西越是要打撈基礎，就像是學習編程語言的語法一樣，希望對和我一樣初學Vue的小伙伴有一些幫助，共同進步！

---

---

總結

以上是生活随笔為你收集整理的vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。