# 🏅 Day4 - Vue.js 的基礎魔法：v-for

## 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="🏅 Day4 - Vue.js 的基礎魔法：v-for 題目" src="https://codepen.io/danny666/embed/oNroYrE?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/danny666/pen/oNroYrE">
🏅 Day4 - Vue.js 的基礎魔法：v-for 題目</a> by Rain (<a href="https://codepen.io/danny666">@danny666</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="Composition API：v-for 範例 (2)" src="https://codepen.io/yen-kg/embed/LYodGrL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/LYodGrL">
Composition API：v-for 範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</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="Composition API：v-for 範例 (3)" src="https://codepen.io/yen-kg/embed/zYQWryo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/zYQWryo">
Composition API：v-for 範例 (3)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</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="Composition API：v-for 範例 (4)" src="https://codepen.io/yen-kg/embed/pomLygy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/pomLygy">
Composition API：v-for 範例 (4)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

題目
---

操作 [這個模板](https://codepen.io/yen-kg/pen/zYQWqWR)，執行以下要求（只能操作 HTML 的部分）：

**請使用 v-for 渲染資料如下圖：**


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
<template>
<div id="app" class="container">
<div class="row">
<div v-for="(fruit, index) in fruitData" :key="index" class="col-md-6 mb-3">
<div class="card" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">水果名稱：{{ fruit.title }}</h5>
<p class="card-text my-2">價錢：{{ fruit.price }}</p>
<p class="card-text mb-3">數量：{{ fruit.count }}</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
</div>
</div>
</template>
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/abgGwGN) |
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/vYqxyPG) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/LYKWbwV) |
|HsienLu|[CodePen](https://codepen.io/Hsienlu/pen/NWZpdxM)|
|Mars|[CodePen](https://codepen.io/MarsKuo/pen/yLdMgVZ)|
| Jay |[CodePen](https://codepen.io/yeeyaha-jay/pen/qBzrqGB) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/xxoqgRG) |
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/gONmgxo) |
| mu mu | [CodePen](https://codepen.io/ishuki916/pen/eYwvgyO) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/BagWpwx) |
| Aden | [CodePen](https://codepen.io/Osases/pen/jOjByQR) |
| chichi | [CodePen](https://codepen.io/chichihuang/pen/XWLMMye) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/dyBvvoJ) |
| Charis_Lai | [CodePen](https://codepen.io/charislai/pen/rNEymxd) |
| Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/JjQWWga) |
| 皮克 | [CodePen](https://codepen.io/bad-527boy/pen/jOjBmyw) |
|阿鵝|[CodePen](https://codepen.io/noracami/pen/yLdMMWb)|
|rjjq|[CodePen](https://codepen.io/rjjq/pen/vYqxmjO)|
| Tough life | [Codepen](https://codepen.io/hakuei0115/pen/zYVZweb)
| n913239 | [CodePen](https://codepen.io/n913239/pen/oNrZWMv)|
| Tanyaaaa | [CodePen](https://codepen.io/tanya77777/pen/RwzpLer)|
| Shin | [CodePen](https://codepen.io/shin9626/pen/wvLJpwR)|
|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/OJepzXd)|
|YO|[CodePen](https://codepen.io/Y-1717/pen/mdZWpQg)|
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/dyBvdMr) |
| 蛋黃 |[Codepen](https://codepen.io/yiyun12o9/pen/MWMpQOV)
| KK | [Codepen](https://reurl.cc/WNX2L9) |
| 好了啦 | [Codepen](https://codepen.io/j-z-the-flexboxer/pen/QWXpmMZ) |
| Barry1104 | [Codepen](https://codepen.io/barry1104/pen/bGPqQWv) |
| ABOOS | [Codepen](https://codepen.io/guhungyin/pen/OJepaxz) |
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/WNqpOMY) |
| K | [CodePen](https://codepen.io/Kristy-Chen/pen/xxoqdMo) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/JjQWevX) |
| 小葉 | [CodePen](https://codepen.io/rsosijvr-the-flexboxer/pen/rNEyPMJ) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/abgJXEQ) |
| imsmallnew | [Codepen](https://codepen.io/imsmallnew/pen/abgJXaX) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/JjQNdye)|
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/VwJbeyx)|
| Rumi | [CodePen](https://codepen.io/Tzuru-Chen/pen/VwJbpOG)|
| anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/WNqjjKp)|
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/RwzVjMp)|
| Mina | [CodePen](https://codepen.io/yanling-99/pen/yLdbMPN)|
| willy0719 | [CodePen](https://codepen.io/DOBEST/pen/bGPWvpr)|
| Abby | [CodePen](https://codepen.io/abby1125/pen/LYKymNW) |
| dodo | [CodePen](https://codepen.io/MissDouble/pen/RwzVyqe) |
| ling | [CodePen](https://codepen.io/yen-kg/pen/zYQWqWR) |
| zhen | [CodePen](https://codepen.io/yunnnz/pen/zYVwaZR) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/yLdbWJV) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/abgwomq)|
| Steven1220 |[Codepen](https://codepen.io/Steven1220/pen/QWXgvNb)|
| kuolun |[Codepen](https://codepen.io/kuolun/pen/NWZggjv)|
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/PorjjJW)|
| sandra191919 |[Codepen](https://codepen.io/a0960529965/pen/WNqOjyx)|
| JC |[Codepen](https://codepen.io/jy_123/pen/GRbEQje)|
| Renee |[Codepen](https://codepen.io/renee_wu/pen/jOjwjXx)|
| 咖咖 |[Codepen](https://codepen.io/gon790219/pen/mdZMdOJ)|
| Yuwen |[Codepen](https://codepen.io/Yuwen-the-reactor/pen/NWZvrNb)|
| Regal |[Codepen](https://codepen.io/wbebepgt-the-sans/pen/wvLqdvN)|
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/GRbvwxo) |
| Chieh | [CodePen](https://codepen.io/Chieh_/pen/ZEdJVjg) |
| floya9733 | [CodePen](https://codepen.io/TZU68/pen/dyBVOoz) |
| jacly | [CodePen](https://codepen.io/yen-kg/pen/zYQWqWR) |
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/XWLeeej) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/jOjGeVo) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/zYVEVzR) |
| mia | [Codepen](https://codepen.io/mnscake/pen/RwzjRPq) |
| Danny | [Codepen](https://codepen.io/danny666/pen/oNroYrE) |
| Rowan | [Codepen](https://codepen.io/dxnqcnen/pen/poXdpJd) |
| m.m | [Codepen](https://codepen.io/meggie-liu/pen/jOjaXyG) |
| Peter | [Codepen](https://codepen.io/peterhsj/pen/yLdpzqd) |
| Triple | [CodePen](https://codepen.io/riku30/pen/bGPaZVZ) |
| cami | [CodePen](https://codepen.io/irisLife/pen/zYVRZxP)|
| Erin | [CodePen](https://codepen.io/erin-feng/pen/oNrqmev)|
| Zoe | [CodePen](https://codepen.io/roanne-rou/pen/ZEdoqro)|
| Ching | [CodePen](https://codepen.io/huangching/pen/jOjdyGO) |
|Eden|[Codepen](https://codepen.io/iseden/pen/rNXxNWB)|
|叮咚|[Codepen](https://codepen.io/yen-kg/pen/zYQWqWR)|

<!--

| user | [CodePen]() |

-->