v-for

Vue 中的 v-for 指令允許我們基於數據渲染一個列表。


上面的例子中，items 是一個包含三個物件的數組。v-for 會遍歷每個物件，並對每個物件渲染一個 元素。

使用索引

當遍歷數組時，我們還可以獲取當前項目的索引。

遍歷物件

v-for 也可以用於遍歷物件的屬性。

v-if, v-else-if, v-else 條件渲染

Vue 提供了一種功能強大的方式來控制模板的條件渲染：使用 v-if, v-else-if, 和 v-else 指令。這些指令允許我們基於條件動態顯示或隱藏元素。

基本語法

v-if 指令用於基於其表達式的真實性來渲染元素。


如果 isVisible 為 true，則 元素將被渲染；如果 false，則不會。

v-else-if 和 v-else

這兩個指令用於與 v-if 指令一起使用，提供額外的條件分支或默認內容。


就和一般代碼if else一樣，不過變成處理element罷了

注意事項

不要v-if 和 v-for 一起使用，v-for優先級別高，而且實際混合也很亂

額外v-show

在 Vue 中，還有另一個用於條件渲染的指令：v-show。主要的區別是：

• v-if: 根據條件真/假，決定是否在 DOM 中渲染元素。
• v-show: 始終會渲染元素，但使用 CSS 的 display 屬性來控制其可見性。
  一個是是否渲染，一個是始終渲染控制css可見性罷了

學習重點總結

• v-for 指令:
  • v-for 用於列表渲染，允許我們根據一組數據動態生成多個元素。
  • 每個項目都可以通過指定的變數在模板中訪問。
  • v-for 與 v-if 的結合需要注意：當同時在一個元素上使用時，v-for 的優先級高於 v-if。
    -在自定義組件中使用 v-for，該組件可以接收當前循環的項目作為其數據。
  • v-if, v-else-if, v-else 指令:
  • 這些指令提供了條件渲染的功能，根據不同的條件渲染或不渲染元素。
  • v-if 根據其表達式的真實性來決定是否渲染該元素。
  • v-else-if 和 v-else 提供了額外的條件渲染分支。
  • 這些指令之間的順序是固定的：v-if -> v-else-if -> v-else。
    -與 v-show 的區別：v-if 是否渲染元素取決於條件，而 v-show 始終渲染元素但會使用 CSS 切換其可見性。

各位繼續加油，明天我們進入小實做啦～