# 🏅 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 渲染資料如下圖：** ![image](https://hackmd.io/_uploads/BypODUwUC.png) ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： <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]() | -->