# 🏅 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 / 答案 |
|:---:|:---------- |:------------------------------------------------------------ |
| 01 | 登登登 | [CodePen](https://codepen.io/Duncanin/pen/vENmobM) |
| 02 | Gui | [CodePen](https://codepen.io/guitimliu/pen/NPGgKwg) |
| 03 | 小羊 | [CodePen](https://codepen.io/allen9630308/pen/GgpEKOZ) |
| 04 | Clove_墨 | [CodePen](https://codepen.io/CloveTseng1026/pen/yyYXBvj) |
| 05 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/EaVXYOz) |
| 06 | poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/zxvzOgV) |
| 07 | dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/azvwbdz) |
| 08 | Candace | [CodePen](https://codepen.io/Candace802/pen/vENZYeJ) |
| 09 | 阿鵝 | [CodePen](https://codepen.io/noracami/pen/bNVRGpM) |
| 10 | emmayo | [CodePen](https://codepen.io/emmayo/pen/JoYJooy) |
| 11 | DaRon | [CodePen](https://codepen.io/daron0811/pen/gbaRbPZ) |
| 12 | yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/EaVXaPm) |
| 13 | thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/vENZEJQ) |
| 14 | yi | [CodePen](https://codepen.io/5-1/pen/NPGgPLG) |
| 15 | Momoze | [CodePen](https://codepen.io/mleczmam-the-typescripter/pen/pvjwJgr) |
| 16 | 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/LEpLVew) |
| 17 | wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/ByoZoam) |
| 18 | dean | [CodePen](https://codepen.io/ch933114/pen/xbwrZXp) |
| 19 | ann.328 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/raOwLzB) |
| 20 | 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/MYaoeMw) |
| 21 | wanghuaiying | [CodePen](https://codepen.io/huaiying/pen/YPyQGqL) |
| 22 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/LEpLRpO) |
| 23 | 阿kai | [CodePen](https://codepen.io/kaihuang3013/pen/GgpENVW) |
| 24 | Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/QwjgdxY) |
| 25 | Lin | [CodePen](https://codepen.io/Lin4611/pen/pvjwPbr) |
| 26 | kat | [CodePen](https://codepen.io/Nek0u0/pen/PwPjEjL) |
| 27 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/PorjjJW)|
| 28 | 地呱 | [Codepen](https://codepen.io/LHung/pen/azvwQWb)|
| 29 | haohaoliao | [CodePen](https://codepen.io/yuyuyuhaohao/pen/KwdvpJZ) |
| 30 | Sam | [CodePen](https://codepen.io/CloveTseng1026/pen/yyYXBvj) |
| 31 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/vENJpMV) |
| 32 | 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/ByodYzy) |
| 33 | Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/WbQEPdG) |
| 34 | David0799 | [CodePen](https://codepen.io/David0799/pen/LEpWbKx) |
| 35 | Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/KwdvYKE) |
| 36 | 阿昌 | [CodePen](https://codepen.io/ychleo102615/pen/EaVvJYj) |
| 37 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/gbaxJmV) |
| 38 | 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/myeMYgJ) |
| 39 | rio_wei| [CodePen](https://codepen.io/wei_wu/pen/JoYrryv)|
| 40 | bonnieli1414| [CodePen](https://codepen.io/bonnieli1414/pen/XJmzNZg)|
| 41 | 禹成林 | [CodePen](https://codepen.io/useirin/pen/ZYbaPPM) |
| 42 | 肉桂卷 | [CodePen](https://codepen.io/ginnlee/pen/JoYMMEP) |
| 43 | Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/MYaQYpB) |
|44|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/jEbZPLo)|
|45|叮咚|[CodePen](https://codepen.io/pinchieh-lin/pen/WbQzqVr)|
|46|白雪|[CodePen](https://codepen.io/weiwei032835-the-styleful/pen/Qwjrgbo)|
|47|Chen|[CodePen](https://codepen.io/JGM-C/pen/yyYEXQN)|
| 48 | ScarT | [CodePen](https://codepen.io/Acadia/pen/GgpBZvo) |
| 49 | Toung | [Codepen](https://codepen.io/Toung/pen/PwPdevv) |
| 50 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/wBMwWNm) |

<!--
| 00 | user | [CodePen]() |
-->