v-for
可以針對一組陣列或物件進行渲染,指令中會使用 (item, key) in array
的語法,其中:
範例為陣列、物件搭配迴圈的方式,範例重點:
v-for="(item, key) in array"
0, 1, 2...
,物件索引則為屬性名稱由於 v-for 在運作上是採用快速替換的形式。因此,有部分元素會沒有完整的被替換,可參考以下範例:
情境,當 input 輸入內容後,按下反轉陣列時:
新版的 Vue 相關開發工具中,都會強烈建議加上 key
。
範例重點:
當渲染陣列資料卻不便產生新的標籤時,可以搭配 <template>
標籤做使用,此方法即可在產生 DOM 結構時不產生額外的標籤。另外 template
標籤也同樣可用於 v-for
上
範例重點:
template
標籤替代原有的 HTML 標籤,而 template
標籤是不會被輸出的。為了避免不要的錯誤,Vue.js 的規範中建議不要將 v-for 與 v-if 混合使用。搭配進階工具如 Vue Cli 及 ESLint 時,兩者混合使用會跳出錯誤。
範例重點: