--- 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]() | -->