---
# System prepended metadata

title: "\U0001F3C5 Day 18 - Vue 指令練習 v-for, v-if"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 18 - Vue 指令練習 v-for, v-if

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

題目
---
操作 [這個模板](https://codepen.io/hexschool/pen/YzvObBP?editors=1010)，執行以下要求（只能操作 HTML 的部分）：

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

![](https://i.imgur.com/MPuptPj.png)



## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  
<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>
-->




回報區
---


|     Discord     |                               CodePen / 答案                                |
|:---------------:|:---------------------------------------------------------------------------:|
|    冬天#5215    |              [Codepen](https://codepen.io/winter_/pen/GRBjjmP)              |
|       aki       |              [codepen](https://codepen.io/aki168/pen/dyjoRmL)               |
|   Wendy3#5615   |              [Codepen](https://codepen.io/wendy03/pen/bGjwwWX)              |
|   popeye#5081   |             [codepen](https://codepen.io/popeye_ux/pen/YzjGGQO)             |
|    威0#6919     |     [codepen](https://codepen.io/n0918679182/pen/WNKGGZb?editors=1010)      |
|   albee#9121    |     [Codepen](https://codepen.io/albee-chang/pen/GRBjjOe?editors=1010)      |
|  老皮博士#8050  |        [Codepen](https://codepen.io/li0406/pen/gOjwwzJ?editors=1010)        |
|   楊苡安#2752   |      [Codepen](https://codepen.io/yi-an-yang/pen/ExpggEb?editors=1010)      |
|    Kimi#9564    |             [CodePen](https://codepen.io/kimihu91/pen/xxJwjGm)              |
|  AuroraC#6539   |       [codepen](https://codepen.io/AuroraC/pen/wvxzzXv?editors=1010)        |
|     YC#2522     |               [CodePen](https://codepen.io/YCLu/pen/XWBjjMM)                |
|    薯餅#3581    |           [CodePen](https://codepen.io/ColdingPoTaTo/pen/NWBRRBq)           |
|    yuyu#6310    |       [CodePen](https://codepen.io/yuyu0905/pen/dyjppgg?editors=1010)       |
|  KC_8685#9343   |             [Codepen](https://codepen.io/cathy7411/pen/oNMzzWq)             |
|  LinaChen#1796  |             [Codepen](https://codepen.io/LinaChen/pen/rNrMMZz)              |
|    無名#6427    |              [Codepen](https://codepen.io/Nomoney/pen/KKBMvMV)              |
|  ChloeLo#4858   |              [Codepen](https://codepen.io/chloelo/pen/jOpMMab)              |
|    大衛#4869    |       [Codepen](https://codepen.io/exnsrpjc/pen/PoBGGmL?editors=1010)       |
|    int#7518     |             [Codepen](https://codepen.io/intHuang/pen/NWBRRQr)              |
| PeihanWang#2530 |      [Codepen](https://codepen.io/PeihanWang/pen/GRBjNgR?editors=1010)      |
|  mandylai#4055  |            [Codepen](https://codepen.io/mandy-lai-2/pen/poZEEON)            |
|    RJRS#9430    |               [CodePen](https://codepen.io/RJRS/pen/jOpMMmP)                |
|   RyanC#6960    |        [CodePen](https://codepen.io/RyanYD/pen/MWBjjNv?editors=1010)        |
|  kenki100#0068  |              [Codepen](https://codepen.io/ken100/pen/gOjwweJ)               |
|    大頭#8116    |      [Codepen](https://codepen.io/d22495521/pen/poZEEMP?editors=1010)       |
|    威爾#1694    |              [CodePen](https://codepen.io/WILL_Wu/pen/yLqaVNo)              |
| enolachen#8031  |      [CodePen](https://codepen.io/Chen-Enola/pen/jOpMVWm?editors=1010)      |
|     PH#2731     |       [CodePen](https://codepen.io/lokf9527/pen/ZEjpBWv?editors=1010)       |
|    ㄚ翔#8126    |          [codepen](https://codepen.io/engineerjohnson/pen/poZENyr)          |
|    圈圈#4060    |  [Codepen](https://codepen.io/wjejfczn-the-bold/pen/rNrMWvq?editors=1010)   |
| jimmyFang#9575  |       [Codepen](https://codepen.io/pohxiqqo/pen/ExpgNbG?editors=1010)       |
|  Jill Lee#0809  |     [Codepen](https://codepen.io/chi-ling-lee/pen/vYaXyZY?editors=1011)     |
|   心幻羽#0056   |     [Codepen](https://codepen.io/linglingsyu/pen/PoBGbKz?editors=1011)      |
|    kuku#3118    |            [Codepen](https://codepen.io/mengting-ku/pen/WNKGoPd)            |
|   法希娜#3206   | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/eYjdBbQ?editors=1010) |
|   k.sin#3115    |        [Codepen](https://codepen.io/sin588/pen/bGjwBRg?editors=1010)        |
|  RainLiao#2616  |            [Codepen](https://codepen.io/billpop741/pen/WNKGogX)             |
|   小木馬#8760   |       [Codepen](https://codepen.io/wmmtbcsd/pen/bGjwgVL?editors=1010)       |
| Potatolee#7749  |      [Codepen](https://codepen.io/potatoleee/pen/oNMzBvj?editors=1011)      |
|    阿鑫#4346    |       [CodePen](https://codepen.io/Neil1024/pen/gOjwgmX?editors=1010)       |
|   Hilda#7085    |         [CodePen](https://codepen.io/vwquikad-the-vuer/pen/zYLKNOQ)         |
|  PayRoom#8328   |            [CodePen](https://codepen.io/water38198/pen/ZEjpLvg)             |
|  Wendy77#8049   |              [Codepen](https://codepen.io/Wendy__/pen/JjBREpK)              |
|  Asher Xu#9297  |            [Codepen](https://codepen.io/kirakira72/pen/LYBRxmx)             |
|   RainJ#3480    |             [Codepen](https://codepen.io/RainJCode/pen/OJwRWYB)             |
| LHchien33#6232  |             [Codepen](https://codepen.io/lin_chien/pen/dyjpNLV)             |
|   魚子醬#5220   |             [Codepen](https://codepen.io/haihsuan/pen/ExpgZzg)              |
|    米米#1824    |     [Codepen](https://codepen.io/Jameshsu0407/pen/eYjdvyv?editors=1000)     |
| 出事了阿伯#9923 |     [Codepen](https://codepen.io/BradpittLai/pen/PoBGpdM?editors=1010)      |
|    小夜#3809    |       [Codepen](https://codepen.io/Naito_K/pen/LYBRWqJ?editors=1010)        |
|   黑白兔#0684   |             [Codepen](https://codepen.io/johnny329/pen/vYaXydO)             |
| masterYan#2480  |        [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/xxJEdyN)        |
|   Benson#6763   |             [Codepen](https://codepen.io/kumashow/pen/poZEeJv)              |
|    Tami#6742    |         [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWBjmqB)         |
| 阿異#4776       |           [Codepen](https://codepen.io/yani21399/pen/ExpgXNx)                |
| JackC#0411       |           [Codepen](https://codepen.io/key0329/pen/BaPLZjm)                |
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/abjmwdo?editors=1010)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/JjBRJgW)
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/zYLKora)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/dyjpWao) |
| azami#5986 |[CodePen](https://codepen.io/azami/pen/xxJELrX)|
| Hironaka#7367 |[CodePen](https://codepen.io/Hironaka0815/pen/wvxzPYE?editors=1011)|
| hannahTw#2224 |[CodePen](https://codepen.io/hangineer/pen/poZEdpY?editors=1010)|
| Alex#9978 |[CodePen](https://codepen.io/datsxzqg-the-selector/pen/rNrMYra?editors=1010)|
| yoyo123456#0577 |[CodePen](https://codepen.io/hungyoyo/pen/oNMzppd?editors=1010)|
|DIO大人#4776|[CodePen](https://codepen.io/oscar-2283/pen/oNMzYbV)|
| Ruby Chen#7452| [Codepen](https://codepen.io/ruby92429/pen/LYBROVV?editors=1010)|
|Bella_#1587| [Codepen](https://codepen.io/Chen-Bella/pen/zYLKpad?editors=1010)|
|Austyn#0949| [Codepen](https://codepen.io/fish90547/pen/LYBRdPE?editors=1010)|
Zack_P#1805| [Codepen](https://codepen.io/tmzazirh-the-animator/pen/LYBRmjQ?editors=1010)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/MWBjXQV?editors=1010)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/vYaXrqG)|
| hungya#0773 |[Codepen](https://codepen.io/hungya777/pen/eYjdKqb?editors=1010)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/QWBKVVj)|
|阿沁#8176|[Codepen](https://codepen.io/a8322342/pen/YzjGgor?editors=1010)|
|Rena#6249| [Codepen](https://codepen.io/aureate0116/pen/LYBRoJK)
|Silvialu#4521| [Codepen](https://codepen.io/Silvia091640/pen/rNrMdaR)
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/JjBbYGP)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/RwBGVmG)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/ZEjBQOG?editors=1010)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/oNMYbmy)|
|FiReBrO#0557|[CodePen](https://codepen.io/firebro42/pen/KKBNMOY)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/bGjBWPW?editors=1010)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/MWBboOL)|
|yoyo#1003|[Codepen](https://codepen.io/pen/mdjOMWK)|
|柚子#3958|[Codepen](https://codepen.io/wendy03/pen/bGjwwWX?editors=1010)|
|CatBoxy#4207|[Codepen](https://codepen.io/nekoboxy/pen/MWBjNjw)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/xxJRJVN?editors=1010)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/OJwbaLb?editors=1011)|
|How#5806|[codepen](https://codepen.io/howtobefine/pen/KKBNrZB)|
|Peng#9811|[codepen](https://codepen.io/peng-027/pen/OJwbYJe)|
|ViNci#4273|[codepen](https://codepen.io/ViNciSyo/pen/gOjLJxY)|
|shiuan#4721|[codepen](https://codepen.io/prankaChang/pen/VwBPvLZ?editors=1010)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/zYLwjBb?editors=1010)|
|Judy Wei#6103|[Codepen](https://codepen.io/Judy0718/pen/dyjWqGP)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/RwBVYOZ)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/mdjmZEg?editors=1010) |
| kevin8349#6131 | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/VwBWmLp?editors=1011) |
| YU#0618  |  [CodePen](https://codepen.io/yoken_/pen/MWBEjKm)  |
| Cookie SSS#6991  |  [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/OJwxapB?editors=1010)  |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922  |  [CodePen](https://codepen.io/sho666/pen/YzjEzKV?editors=1010)  |
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/PoBmwbj)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/PoBQopK?editors=1010)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/wvxjYeb)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/jOpxvvJ?editors=1010)|
|大大#5164|[CodePen](https://codepen.io/gzonothk-the-looper/pen/BaPVbqz)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/bGjKPMe?editors=1010)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/zYJOZJm?editors=1010)|
|popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/dyjvvWO?editors=1010)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/oNagYMe)|
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/LYgbqBQ)|
