---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 18
###### tags: `Vue 直播班 - 2022 春季班`

請先閱讀完 [v-for 的課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2FKWXW13ewTaq2M_svlEAYXA) 再嘗試作答:

題目 (請將答案貼上 CodePen)
---
操作 [這個模板](https://codepen.io/znlcgmgk/pen/VwPEjVK?editors=1010)，執行以下要求 (只能操作 HTML 的部分):

> 請使用 v-for 渲染資料如下圖，並搭配使用 v-if 進行歸類判斷


回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
<div id="app">
<div class="container p-3">
<h3>年紀大於 25 歲的同事</h3>
<ul>
<template v-for="collegue in collegueList" :key="collegue.name">
<li v-if="collegue.age > 25">
<p v-for="(value, key) in collegue" :key="value">屬性: {{ key }}，值: {{ value }}</p>
</li>
</template>
</ul>
<h3>年紀小於 25 歲的同事</h3>
<ul>
<template v-for="collegue in collegueList" :key="collegue.name">
<li v-if="collegue.age <= 25">
<p v-for="(value, key) in collegue" :key="value">屬性: {{ key }}，值: {{ value }}</p>
</li>
</template>
</ul>
</div>
</div>
-->

回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1| Iris Huang | https://codepen.io/ythuang/pen/mdBgvdd |
|2| 肉鬆 | https://codepen.io/klrkicog/pen/ExwJGqR?editors=1010 |
|3| Larry | https://codepen.io/larrylinr5/pen/yLzrGmo |
|4|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/vYeMvqq|
|5|Sheep| https://codepen.io/SheepNDW/pen/QWqPzed |
|6|Jason Chen| https://codepen.io/jason60810/pen/xxXeMXe |
|7|Empty Wu|https://codepen.io/emptywu/pen/rNGbPro |
|8|Jhen|https://codepen.io/cheng-jhen/pen/gOGyqjg |
|9| POPEYE |https://codepen.io/popeye_ux/pen/ZEXZwPV |
|10| Gill |https://codepen.io/Gill-Chin/pen/KKXYEVr?editors=1010 |
|11| Himi|https://codepen.io/Himi/pen/QWqPodJ|
|12|YC|https://codepen.io/YCLu/pen/BawEbmP |
|13|Howard|https://codepen.io/yawdnhbm/pen/GRMLeZv|
|14|威爾|https://codepen.io/WILL_Wu/pen/KKXYEqE|
|15|Elaine Liu|https://codepen.io/elaine7598/pen/RwLOdNp|
| 16 | Sihle Huang | https://codepen.io/bugbug777/pen/NWamJwE |
|17|Zhang|https://codepen.io/Zhangbun/pen/ExwJrpJ|
|18|Pei Ying|https://codepen.io/Pei-Ying/pen/MWERxON|
|19|Yunei|https://codepen.io/Yunei/pen/YzrMgRY|
|20|Liu| https://codepen.io/feng-chi-liu/pen/bGoJJGy |
|21|John|https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011 |
|22|小K| https://codepen.io/kelen1995/pen/RwLOdzJ|
|23| Kelvin Hsu | https://codepen.io/kelvin001/pen/RwLOOvm?editors=1010 |
|24|Bella Shya|https://codepen.io/BellaXie/pen/QWqPRmO?editors=1010|
|24|Henry Wu| https://codepen.io/dkcmlaww-the-flexboxer/pen/XWeQwxO?editors=1010 |
|25|Tim Lin|https://codepen.io/TimmyLin/pen/abLxrPg|
|26| 黃士桓 | https://codepen.io/shr-huan-huang/pen/mdBgZJm?editors=1010 |
|27|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/xxXeoKx?editors=1010|
|28|陳暐中|https://codepen.io/wei-z/pen/PoJgrRe?editors=1010|
|29|有廖先生(rain)|https://codepen.io/billpop741/pen/poWmzzw|
|30|Aaron Tu|https://codepen.io/aarontu/pen/eYGaOML|
|31| Charlotte Lee | https://codepen.io/charlotte-lee/pen/vYewBvG?editors=1010 |
|32| Judy☻ | https://codepen.io/hsiaohan/pen/rNGgabY?editors=1010 |
|33|Gui|https://codepen.io/guitimliu/pen/ExwzjqB
|34| Vicky | https://codepen.io/hyxfish27/pen/YzrMMjB |
|35|Scottie|https://codepen.io/wow767t/pen/YzrMBPo?editors=1010|
|36|shio|https://codepen.io/shioyen/pen/xxXNZLP?editors=1010|
|37|AllenW|https://codepen.io/AllenW/pen/XWewrpB
|38|Benson|https://codepen.io/soul81624/pen/gOGJMqK|
|39|Calon|https://codepen.io/Calon0118/pen/GRMajJX|
|40| 咖咖 | https://codepen.io/gon790219/pen/mdBYVpv |
|41|Jasper|https://codepen.io/li-jasper/pen/gOGJwgZ |
|42|Wenfish|https://codepen.io/wenfisht/pen/OJxYbZb|
|43|PeiChi|https://codepen.io/pei-chi-tsai/pen/oNGRZeq?editors=1011|
|44|柴貓|https://codepen.io/shibacat/pen/yLzWMoO|
|45|Rick Tzeng|https://codepen.io/rick917jp6/pen/KKXLmKW
|46|tingyu| https://codepen.io/dgltu/pen/abLrJgG?editors=1010 |
|47|Evan Chiang|https://codepen.io/piskesocute/pen/bGoyoog|
|48|Leo Song|https://codepen.io/sunnylaba/pen/qBPGKMG?editors=1010 |
|49|Arista|https://codepen.io/arista-hsieh/pen/LYzorwY |
|50|kevinhes|https://codepen.io/kevinhes/pen/BawePRJ?editors=1011|
|51|DDDDK|https://codepen.io/dkklee/pen/rNGgrwE|
|52|Henry|https://codepen.io/kaohenry9287/pen/NWaVEPX|
|53|AKI|https://codepen.io/akichen27/pen/WNZBgpV |
|54|andersonshen| https://codepen.io/luxyenni-the-bold/pen/NWaVoOg |
|55|我是泇吟|https://codepen.io/kljuqbxs/pen/WNZBqeX|
|56|mei|https://codepen.io/Shila-Chen/pen/poWmXpq|
|57|Yummyniya|https://codepen.io/yummyniya/pen/eYGawqm|
|58|Steven Chan|https://codepen.io/Steven1220/pen/vYewQRm?editors=1010|
|59|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/vYeqNmy|
|60|Dobe|https://codepen.io/lisebee/pen/0cdc1d64956b34ef026eed4d41c65f28?editors=1010|
|61|Anna|https://codepen.io/kycrleao/pen/poWXzYa?editors=1010|
|62| Meng | https://codepen.io/MGHN/pen/wvrLXPM?editors=1010 |
|63| 紙飛機 | https://codepen.io/paperplanea/pen/WNZVreg |
|64|肉桂卷|https://codepen.io/ginnlee/pen/ZEXgQLz|
|65|Bonnie|https://codepen.io/bonnieli1414/pen/OJxKxdy |
|66|Terry21|https://codepen.io/feng0409/pen/KKyPNBM?editors=1010 |
|67|Yuan| https://codepen.io/yuanluo13542/pen/OJOLXQb |
|68| Otis | https://codepen.io/humming74/pen/MWOgmzp?editors=1010 |
|69|nora-end|https://codepen.io/nora-shu/pen/yLPBrqr?editors=1010
|70|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/dyZbBYw|
|71|Will|https://codepen.io/ncrdpepc-the-lessful/pen/Bamaayy?editors=1010|
|72|Bruno Yu|https://codepen.io/bruno-yu/pen/mdqdyzB?editors=1010|
|73|阿劍| https://codepen.io/seonkuraito/pen/PoJVNvd |
|74|阿武|https://codepen.io/samwnkyat/pen/mdqJpyN
|75|ShaoYu|https://codepen.io/shaoyukao/pen/dyZodZO|
|76|FuChang|https://codepen.io/fuchang830714/pen/mdBNegw|
|77|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/jOabJXE?editors=1010|
|78|hua|https://codepen.io/hahahazzz123/pen/eYeZoBZ|
|79|ZY Hsu|https://codepen.io/zihyin/pen/Rwjpgdb?editors=1010|
|80|Jianhao|https://codepen.io/jianhao215/pen/xxPqrwP?editors=1010|
|81|andyii|https://codepen.io/gultrotpybyvue/pen/GROOrqr|
|82|Hedy|https://codepen.io/hhhsuan41/pen/KKymBdP|
|83| Mylène | https://codepen.io/hamajibashi/pen/VwrqjVK |
|84|大衛| https://codepen.io/exnsrpjc/pen/popbBMa?editors=1011 |
|85|Carol Li|https://codepen.io/carolli834/pen/RwMvNbZ?editors=1010|