v-for 迴圈

  1. 請跟隨課程完成此章節。

陣列與物件的迴圈

請使用 v-for 在陣列與物件上,並且加上索引

  • {{ key }} - {{ item.name }} {{ item.age }} 歲

Key

請在範例上補上 key,並觀察其差異

  • {{ key }} - {{ item.name }} {{ item.age }} 歲

Filter

請製作過濾資料

  • {{ key }} - {{ item.name }} {{ item.age }} 歲

不能運作的狀況

講師說明

  • {{ key }} - {{ item.name }} {{ item.age }} 歲

純數字的迴圈

  • {{ item }}

Template 的運用

請將兩個 tr 一組使用 v-for

v-for 與 v-if

請加上 v-if 判斷式

  • {{ key }} - {{ item.name }} {{ item.age }} 歲

v-for 與 元件

講師說明

注意:現在建議元件使用 v-for 都加上 key。參考