v-for

v-for 可以針對一組陣列或物件進行渲染,指令中會使用 (item, key) in array 的語法,其中:

  • item:陣列迭代的元素別名,名稱可自訂
  • key:如果是陣列則為該迭代的索引位置,如果是物件則為該迭代的物件屬性
  • array:陣列或資料的來源

範例為陣列、物件搭配迴圈的方式,範例重點:

  • v-for 的結構為 v-for="(item, key) in array"
  • 無論是陣列、物件都可以使用 v-for
  • 陣列的索引為 0, 1, 2...,物件索引則為屬性名稱

v-for 注意事項

由於 v-for 在運作上是採用快速替換的形式。因此,有部分元素會沒有完整的被替換,可參考以下範例:

情境,當 input 輸入內容後,按下反轉陣列時:

  • 如果沒有 key 時,則 input 位置不會被同時更動
  • 當有加上 key 時,input 位置會與原本的資料內容位置一起變動

新版的 Vue 相關開發工具中,都會強烈建議加上 key

範例重點:

  • 範例最下方有一個反轉陣列的按鈕,按下後會反轉上方的結構
  • 試著輸入一些內容,並反轉整個結構
  • 注意元素中是否有 key 屬性,這會影響到是否能夠 input 是否有隨著結構反轉

當渲染陣列資料卻不便產生新的標籤時,可以搭配 <template> 標籤做使用,此方法即可在產生 DOM 結構時不產生額外的標籤。另外 template 標籤也同樣可用於 v-for

範例重點:

  • 可以使用 template 標籤替代原有的 HTML 標籤,而 template 標籤是不會被輸出的。

為了避免不要的錯誤,Vue.js 的規範中建議不要將 v-for 與 v-if 混合使用。搭配進階工具如 Vue Cli 及 ESLint 時,兩者混合使用會跳出錯誤。

範例重點:

  • 盡可能將 v-if 與 v-for 用不同的標籤呈現