# 🏅 5/19 (三) 每日任務 Day 18
###### tags: `Vue 直播班 - 2021 夏季班`

請先閱讀完 [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>
-->

回報區
---
<!--1:Alpha
codepen: https://codepen.io/alphatero/pen/PopbZMg
-->

<!--2:Jasmin
codepen: https://codepen.io/thejasmin/pen/MWpbygj?editors=1010
-->

<!--3:Izumi泉
codoepen: https://codepen.io/izumi-dev/pen/GRWqLxe
-->

<!--4:Vic
codoepen:https://codepen.io/hsuan333/pen/qBrqZWo
-->

<!--5: Lina Chen
codoepen:https://codepen.io/LinaChen/pen/JjWbXdL
-->

<!--6: 小魚
codoepen:https://codepen.io/jarvis1993/pen/bGqBpqV?editors=1010
-->
<!--7: LiShang
codoepen:https://codepen.io/li-shang/pen/zYZoqBP
-->

<!--8: yijun
codepen:https://codepen.io/sandy3068/pen/BaWQKJo
-->

<!-- 9 : Harold
codepen:https://codepen.io/YuWin0805/pen/NWpbNwr
-->

<!-- 報數 10： RitaHuang
Codepen：
https://codepen.io/Rita-Rossweisse/pen/GRWNZwJ?editors=1010
-->

<!-- 報數 11： Tori
Codepen：
https://codepen.io/hayen/pen/BaWNVox?editors=0010
-->
<!-- 報數 12:陳sam
codepen:
https://codepen.io/euldpliv/pen/BaWQKOK?editors=1010
-->

<!-- 報數 13: Ethan
codepen: https://codepen.io/blazer030/pen/YzZpWyX
-->

<!-- 報數 14: youting
codepen: https://codepen.io/youtingluo/pen/GRWNqjj?editors=1010
-->

<!-- 報數 15: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/ExWNyXz?editors=1010
-->

<!-- 報數 16: Jordan Tseng
codepen: https://codepen.io/jordan-ttc-design/pen/QWpGEar?editors=1010
-->

<!-- 報數 16: WuJungHan
codepen: https://codepen.io/JungHanWu/pen/rNyWLyo?editors=1011
-->

<!-- 報數 17: Jack
https://codepen.io/yxzzktmb/pen/YzZpGKV?editors=1100
-->

<!-- 報數: Sec
codepen: https://codepen.io/Sentiments/pen/eYvBdZY?editors=1010
-->

<!-- 報數 18: Alysa Chan
codepen: https://codepen.io/alysachan/pen/vYxyXyW?editors=1000
-->

<!-- 報數 19: Joe Kuo
codepen: https://codepen.io/alertislow/pen/RwpoGRx?editors=1010
-->

<!--報數 20: Yi Chieh
codePen: https://codepen.io/Yi-Chieh/pen/vYxyKJK
-->

<!--報數 21: Larry
codePen: https://codepen.io/manpower0708/pen/bGqBwxy?editors=1100
-->

<!-- 報數 22: Yiren
codePen: https://codepen.io/Yiren_Liou/pen/RwpooPE?editors=1011
-->

<!-- 23: Jay
codepen: https://codepen.io/jayredk/pen/xxqRRyy?editors=1010
-->

<!-- 23: Yu Sung
codepen: https://codepen.io/kevin-hsu-the-encoder/pen/JjWbbme?editors=1010
-->

<!-- 24: Allen Chou
codepen:https://codepen.io/eepson123tw/pen/qBrqqJL?editors=1010
-->

<!-- 25: 阿倫
codepen: https://codepen.io/jason5125122/pen/BaWQKQa
-->

<!-- 26: Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/bGqBgKL
-->

<!-- 27: Echo
codepen: https://codepen.io/eni13718/pen/vYxygoZ?editors=1011
-->

<!-- 28: Dah
codepen: https://codepen.io/hua0124/pen/OJpbmye
-->

<!-- 29: Alicia Lo
codepen:
https://codepen.io/dkcyhyre/pen/mdWOroQ
-->

<!-- 30: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/gOmLWMJ?editors=1011
-->

<!-- 31: tim Chou
codepen: https://codepen.io/tim-chou/pen/eYvBErJ?editors=1010
-->

<!-- 32: Oober
codepen: https://codepen.io/xtsjrjdv/pen/eYvBGYg?editors=1010
-->

<!--33:李重炫
codepen: https://codepen.io/otherway1123/pen/yLMVVeV?editors=1010
-->

<!-- 34: Alvin
codepen:https://codepen.io/wave99487chu/pen/oNZYKBB
-->

<!-- 35: 圈圈
codepen:https://codepen.io/wei-the-lessful/pen/JjWEPge
-->

<!-- 36: Ted Kuo
codepen:https://codepen.io/TedKuo/pen/dyvNPvv
-->

<!-- 37: 林晉
codepen:https://codepen.io/linchinhsuan/pen/MWpJaML?editors=1010
-->

<!--38: jimmyFang
codepen:https://codepen.io/pohxiqqo/pen/gOmgmOx?editors=1010
-->

<!-- 39: Echo Hui
codepen: https://codepen.io/echohuiecho/pen/PopWpaa?editors=1010 -->

<!-- 40: Erica
https://codepen.io/ericadu/pen/abJpKzJ
-->

<!-- 41: Eyan
https://codepen.io/somebody1997/pen/gOmgKpB?editors=1000
-->

<!-- 42: Tofu Tseng
https://codepen.io/Tofutseng/pen/gOmgqGE
-->

<!-- 43: Valerie
codepen: https://codepen.io/vicky-chang/pen/GRWreyo
-->

<!-- 44: leolee
codepen: https://codepen.io/nekorice/pen/XWMMrjN
-->

<!-- 45:Wel
https://codepen.io/uwhhiaxx/pen/vYxxewv
-->

<!-- 46:twoz
https://codepen.io/twoz/pen/oNZZZQB?editors=1010
-->

<!-- 47: Stacey Huang
https://codepen.io/staceyhuang/pen/xxqqpyZ?editors=1010
-->

<!-- 48: Amber
https://codepen.io/amberTing/pen/wvJJYvY?editors=1010
-->

<!-- 49: Fred Chang
https://codepen.io/fred8196/pen/ZEeewKb?editors=1010
-->

<!-- 50: Amanda Chiang
https://codepen.io/cym199922/pen/KKWmzwE
-->

<!-- 51: MM
https://codepen.io/MINN3/pen/mdWmOQz
-->

<!-- 52: Chiang
https://codepen.io/ChiangJ/pen/YzZxLzd?editors=1000
-->

<!-- 53: Pon Peng
https://codepen.io/pengpon77/pen/MWpGjox?editors=1010
-->