---
# System prepended metadata

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

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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)

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

將答案寫在 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>
https://codepen.io/jmimiding4104/pen/rNPXwpL?editors=1010

額外挑戰：
https://codepen.io/jmimiding4104/pen/abXewEJ?editors=1011

模板與解答皆有使用 Bootstrap5(於 Setting 中引入)，
所以如果想要畫面呈現是相同的要記得載入 Bootstrap5 的 CDN。
-->




回報區
---


|     Discord     |                               CodePen / 答案                                |
|:---------------:|:---------------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/zYbBeOb?editors=1010) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/YzgWBXq) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/MWxeLpL) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/PoLzVWK) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/YzgWBvV?editors=1010) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/ZEPOwxd?editors=1010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/QWoEYmZ) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/MWxeLVd) |
| py | [CodePen](https://codepen.io/Wpypy/pen/JjzKxLG?editors=1011) |
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/OJqXdoZ?editors=1011)|
|Ann Chou|[CodePen](https://codepen.io/annchou_illu/pen/wvOWNRE)|
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/ExMyrKB) |
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/OJqXqPB) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/PoLzLZy) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/PoLzLGx) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/NWJrmXd) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/MWxeRrr) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/JjzKVZz) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/ZEPOZmR?editors=1010) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/wvOWZEg?editors=0010) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/zYbBbJd?editors=1010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/wvOWbop) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/vYPKwzZ?editors=1010) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/qBvNvyx?editors=1010) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/wvOWZJG?editors=0110) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/rNRLXxY?editors=1010) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/gOEMNxQ?editors=1010) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/KKEMjaK) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/MWxeNyv) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/eYXdOZx) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/bGZeXbd?editors=1010) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/bGZwGPN) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/WNmGNBQ?editors=1010) |
 | dora | [CodePen](https://codepen.io/dorayu/pen/abMZXPN?editors=1010) |
 |smlljie|[CodePen](https://codepen.io/smalljie/pen/GRejgYo)|
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/NWJroeE?editors=1010) |
| TTedd | [CodePen](https://codepen.io/TTedd/pen/NWJRPLj?editors=1010) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/oNVzXZb) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/KKEgpMe) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/OJqRVKw) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/zYbKvvq) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/MWxjapw?editors=1010) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/OJqXYRj) |
| Elena | [CodePen](https://codepen.io/elena0127abc/pen/xxBEwBp) |
 | MY | [CodePen](https://codepen.io/ahmomoz/pen/zYbKrGp) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/yLwaeeM) |
 | 熊大 | [CodePen](https://codepen.io/asiating/pen/KKEMJBJ) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/JjzRXEj?editors=1010) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/qBvambW?editors=1010) |
| kj | [CodePen](https://codepen.io/Eero-Chiao/pen/rNRMNYW) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/mdorrPZ) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/gOEwRMK?editors=1010) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/MWxjEEZ)
| runweiting | [CodePen](https://codepen.io/weiting14/pen/bGZwoqY) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/dyrpJGg?editors=1011) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/MWxjrjm) |
|Eden|[Codepen](https://codepen.io/iseden/pen/eYXdyxK)|
| Neil | [CodePen](https://codepen.io/Neil1024/pen/OJqRQoz?editors=1011) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/gOEwvvR?editors=1010) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/poYEKgV?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/VwRKdGm?editors=1010) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/yLwaejP) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/QWoKEVw) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/bGZwxVN?editors=1010) |
 | Rock | [CodePen](https://codepen.io/xiu43317/pen/MWxjqdV) |
 | Chris | [CodePen](https://codepen.io/cjtseng07/pen/eYXdbGe) |
  | 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/PoLGrNe) |
  | hua | [CodePen](https://codepen.io/LHua/pen/ExMgBXy?editors=1010) |
 | celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/QWoGPJK)|
 | Tom | [CodePen](https://codepen.io/sp1daTomm/pen/eYXBaXx) |
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/zYbNvjv) |
| xuan | [codePen](https://codepen.io/xuan0915/pen/JjzEGpL?editors=1010) |
| _amaaaa | [codePen](https://codepen.io/Alicia-Chu/pen/VwRPzmx?editors=1010) |
 | 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/NWJdBBO?editors=1010) |
  | skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/bGZgPRv) |
   | hsuhsusophie | [CodePen](  https://codepen.io/hsuhsusophie/pen/ExMWWvZ?editors=1010) |
| carrie | [CodePen](https://codepen.io/echocarriet/pen/bGZqrXG)|
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/GRemPrO?editors=1010) |
| 翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/gOEWNpp?editors=0010) |
| Ting | [Codepen](https://codepen.io/liara/pen/mdowyzx)|
| chihyang | [Codepen](https://codepen.io/hike1707/pen/OJqgMYa)|
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/wvOqzZx?editors=1010) |
 | peggy | [CodePen](https://codepen.io/peggylai/pen/JjzyvRg?editors=1011) |
 |yuling|[Codepen](https://codepen.io/igzdflpu/pen/poYdjRg)|
 |貢波波夫|[Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/gOEegyj)|
  |WA|[Codepen](https://codepen.io/ldddl/pen/KKELvaY)|
  | yuan! | [CodePen](https://codepen.io/townyuan/pen/OJGyRKy) |

<!-- 

 | user | [CodePen]() |

-->

