---
tags: Vue 實戰班
---

# v-for

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

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

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

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

<iframe height="300" style="width: 100%;" scrolling="no" title="v-for-1" src="https://codepen.io/Wcc723/embed/RwzpMrK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/RwzpMrK">
v-for-1</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## v-for 注意事項

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

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

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

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

範例重點：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="v-for-2" src="https://codepen.io/Wcc723/embed/mdZWxVW?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/mdZWxVW">
v-for-2</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## Template

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

範例重點：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="v-for-3" src="https://codepen.io/Wcc723/embed/GRbWxom?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/GRbWxom">
v-for-3</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 避免 v-if 和 v-for 用在一起
參考資料：https://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-if

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

範例重點：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="v-for-4" src="https://codepen.io/Wcc723/embed/gONmePR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/gONmePR">
v-for-4</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>