---
# System prepended metadata

title: "\U0001F5DE 7/16(五) 每日任務"
tags: [Vue 3 JS 新手夏令營]

---


# 🗞 7/16(五) 每日任務

###### tags:`Vue 3 JS 新手夏令營`

## 題目
渲染 Vue 資料
>請複製 （右下角 fork） [這個範例](https://codepen.io/rider159159/pen/LYyGNgr)，並執行以下要求：
>
>- 畫面上已經有 {{ text }} ，試著建立 vue 環境及資料，讓 Vue 資料渲染至畫面上。
>- fork 按鈕在 codepen 畫面右下角
![](https://i.imgur.com/pP38JTd.png)

參考 : [Vue 實戰影音(免費章節)
](https://courses.hexschool.com/courses/vue-20211/lectures/30451753)




## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至下方作業投稿區就算完成

## 作業投稿區(學員自行投稿)
1. [Ryder 範例投稿](https://codepen.io/rider159159/pen/LYyGpWa)
2. [WangShuan](https://codepen.io/WangShuan/pen/vYmGRoE)
3. [Bucky](https://codepen.io/bucky-3414/pen/rNmyPJv)
4. [Boris Huang](https://codepen.io/boris0510/pen/PompVJP)
5. [Wendy](https://codepen.io/wendy03/pen/zYwZeRL)
6. [TS](https://codepen.io/Tamasama/pen/RwVpvMw)
7. [NieR](https://codepen.io/dennis8499/pen/MWmpLVr)
8. [kevin_hws](https://codepen.io/kevinshu/pen/VwbpgXo)
9. [莊莊莊](https://codepen.io/htswuzbl-the-scripter/pen/MWmpLVQ)
10. [Wuu](https://codepen.io/coolwuu/pen/PompVBN)
11. [lu](https://codepen.io/l_umei/pen/LYyWqdv)
12. [Will](https://codepen.io/WILL_Wu/pen/OJmpdwX)
13. [Yu](https://codepen.io/justyu2001/pen/bGWqzjg)
14. [鏡](https://codepen.io/Jin-L/pen/GRmWzXo)
15. [Ryan](https://codepen.io/ryanwu1003/pen/NWjpoBp)
16. [陳sam](https://codepen.io/euldpliv/pen/bGWqzxq)
17. [Yaru](https://codepen.io/yaru-chen/pen/rNmVJew)
18. [啾啾](https://codepen.io/mnqkmxbc/pen/rNmyPrr?editors=0010)
19. [肉鬆](https://codepen.io/klrkicog/pen/jOmBdeG)
20. [HSY](https://codepen.io/Hsy_00/pen/ExmWrdO)
21. [AhChao](https://codepen.io/AhChao/pen/XWRMOyx)
22. [Nicole Chang](https://codepen.io/Matcha_French_Toast/pen/gOWmqqM)
23. [Megan Chen](https://codepen.io/megan_cc/pen/gOWmqZM)
24. [Saiki](https://codepen.io/rostpfette/pen/KKmWJEZ)
25. [RitaHuang](https://codepen.io/Rita-Rossweisse/pen/vYmxbPO)
26. [samuel823](https://codepen.io/samuelshing/pen/poPeGBL)
27. [Carl](https://codepen.io/gwowqgry-the-lessful/pen/LYyWqvw)
28. [小艾](https://codepen.io/bolaslien/pen/vYmxbwN)
29. [nelson](https://codepen.io/nelsonsu/pen/GRmWzVj)
30. [Stanley](https://codepen.io/stanley-yeh/pen/RwVpvzr)
31. [tina](https://codepen.io/yyuunn/pen/VwbpgRw)
32. [Xing](https://codepen.io/xing10/pen/NWjpoQa)
33. [Vivian](https://codepen.io/vivian1223/pen/abWJMox)
34. [Morris](https://codepen.io/morrisss/full/BaRWbaR)
35. [YC Lu](https://codepen.io/YCLu/pen/LYyWapY)
36. [Gui](https://codepen.io/guitimliu/pen/MWmpxaP)
37. [尼歐](https://codepen.io/naphro/pen/dyWvrXY)
38. [Zhao Chen](https://codepen.io/zhao1995chen/pen/VwbpRje?editors=1010)
39. [JackyYu](https://codepen.io/nemoya16/pen/WNjpmxM)
40. [Kris](https://codepen.io/Naito_K/pen/LYyWaGE?editors=1010)
41. [翁偉凌](https://codepen.io/wengweiling/pen/NWjpJRy)
42. [Jack](https://codepen.io/yxzzktmb/pen/GRmWerW?editors=1010)
43. [Tim Chen](https://codepen.io/timchen0607/pen/WNjpmoz)
44. [Sz](https://codepen.io/szyln/pen/BaRWbQw)
45. [黑川](https://codepen.io/kurokawa/pen/jOmBJVK)
46. [小韭菜](https://codepen.io/jhang-jhe-wei/pen/LYyWamZ)
47. [cc](https://codepen.io/carali527/pen/bGWqzJR)
48. [Joy Cheng](https://codepen.io/joycheng5432/pen/bGWqZjK)
49. [Zackaz](https://codepen.io/zackaz/pen/eYWvXdx)
50. [Yzba](https://codepen.io/oturngo/pen/JjNWzeX)
51. [fsyp2000](https://codepen.io/fsyp2000/pen/mdmWozB)
52. [kimn](https://codepen.io/kimn/pen/poPeYex)
53. [David](https://codepen.io/davidchangtw/pen/gOWmEqv)
54. [ET](https://codepen.io/et0115/pen/oNWZVRZ)
55. [Yen](https://codepen.io/Hoyi/pen/OJmpqKw)
56. [Helen](https://codepen.io/helen75816/pen/qBmrveR)
57. [Chiang](https://codepen.io/ChiangJ/pen/RwVpOwx?editors=1010)
58. [ALEX](https://codepen.io/alex947066/pen/bGWqzMg)
59. [阿丁兒](https://codepen.io/dingpachan/pen/jOmBRWj?editors=1010)
60. [Chu kuohua](https://codepen.io/chukuohua/pen/QWvpPKX)
61. [SunWei](https://codepen.io/sunweiii/pen/ZEKeZKQ)
62. [Bear](https://codepen.io/adaibear/pen/NWjpmRm)
63. [Sean Chang](https://codepen.io/seanchang7/pen/YzVZMEL)
64. [Erica Chen](https://codepen.io/ericachen/pen/OJmpGOd)
65. [JohnnyChao](https://codepen.io/yuanjyun/pen/ZEKeZbY?editors=1010)
66. [Kazami](https://codepen.io/kazamicode/pen/yLbMwvZ)
67. [Nap](https://codepen.io/o0o0o1o0/pen/GRmWLGP)
68. [佳鈴](https://codepen.io/zpyfpsxa/pen/WNjpWyN?editors=1010)
69. [CT](https://codepen.io/ctsvenja/pen/wvdJZjL)
70. [yochen](https://codepen.io/yo02741/pen/qBmrwKp?editors=1010)
71. [Mao](https://codepen.io/vsfvjiuv-the-typescripter/pen/ExmWJpX)
72. [ChengWeiHou](https://codepen.io/ChengWeiHou/details/ExmWJBb)
73. [huanan](https://codepen.io/hua_nan/pen/rNmygVG)
74. [curry](https://codepen.io/Ted19851223/pen/RwVpmWO)
75. [阿熊](https://codepen.io/hsiungchi/pen/RwVpmGz)
76. [Jax](https://codepen.io/cvecve147/pen/NWjprxY)
77. [AnAn](https://codepen.io/AndyAnn/pen/WNjpBNr)
78. [Ruta](https://codepen.io/rue503/pen/eYWvayM)
79. [Eric](https://codepen.io/ericyericy/pen/LYyWorv)
80. [安安](https://codepen.io/leave3310-the-looper/pen/VwbpOXJ?editors=1010)
81. [12345678](https://codepen.io/daniel-handsome/pen/YzVZboX)
82. [紅茶柚o](https://codepen.io/stp9640502/pen/ZEKeNVR)
83. [yuyu](https://codepen.io/yuyu0905/pen/rNmygEq)
84. [weiwei](https://codepen.io/mihtcmff-the-typescripter/pen/poPeaKp)
85. [poko](https://codepen.io/mingxuan-hsu/pen/xxdqNvN)
86. [Louise](https://codepen.io/LouiseHuang/pen/wvdJLWr)
87. [Parsons](https://codepen.io/tom00502/pen/OJmpevz)
88. [Jessy](https://codepen.io/jessy-shen/pen/oNWZrdL)
89. [Lindsay](https://codepen.io/lindsay0214/pen/xxdqRGJ)
90. [yenying](https://codepen.io/yenying0804/pen/OJmpeGZ?editors=1010)
91. [Eva](https://codepen.io/hiYifang/pen/RwVpXRM?editors=1010)
92. [詠銓](https://codepen.io/GGfish26/pen/BaRWXmb)
93. [Lina](https://codepen.io/night2n/pen/BaRWXEX)
94. [EN](https://codepen.io/enkuo0828/pen/poPeMXE)
95. [Cecilia](https://codepen.io/cecilialioooo/pen/JjNNPGZ)
96. [GuanXian](https://codepen.io/cgx871220/pen/QWvvLZg)
97. [DD](https://codepen.io/DD-LIN/pen/qBmmWJw)
98. [Chris](https://codepen.io/christoliu/pen/MWmmgMX?editors=1010)
99. [annycheng](https://codepen.io/chengyu0228/pen/abWWbdr)
100. [guyu](https://codepen.io/guyu-su/pen/qBmmBmE)
101. [小賴](https://codepen.io/Cindy-Lai/pen/BaRRadm)
102. [Wilson](https://codepen.io/wilson22316/pen/KKmmKmB)
103. [Esther13](https://codepen.io/yishan13/pen/XWRRWyW)
104. [shiuan](https://codepen.io/prankaChang/pen/zYwwYbG?editors=1010)
105. [Noin](https://codepen.io/Noin/pen/NWjjPzQ?editors=1111)
106. [hao](https://codepen.io/hao1008/pen/abWWzPL)
107. [Mia](https://codepen.io/whfan96/pen/rNmmVGJ)
108. [tony](https://codepen.io/tony0831-l/pen/eYWWNVV)
109. [Kowin](https://codepen.io/kowin/pen/gOWWpQP)
110. [Anthony](https://codepen.io/anthony-lei-the-looper/pen/rNmmVEq)
111. [AmberCYt](https://codepen.io/amberTing/pen/ExmmVjM)
112. [Chien](https://codepen.io/xxchein/pen/ExmWzJr)
113. [yojanni](https://codepen.io/unayo/pen/GRmmpZN)
114. [D.E.](https://codepen.io/ailentde/pen/rNmmOzb)
115. [Tuna](https://codepen.io/stutuna/pen/OJmmyzO)
116. [kaichun](https://codepen.io/kaiiichun/pen/RwVVWMp)
117. [cw](https://codepen.io/dile1/pen/KKmmdxb)
118. [Daisord](https://codepen.io/daisord/pen/RwVVWzL)
119. [Chen](https://codepen.io/fatchi20150808/pen/WNjjrGW?editors=1010)
120. [Kimberly](https://codepen.io/KIMBERLY_Yen/pen/JjNNGRW)
121. [phoebe](https://codepen.io/phoebe4561/pen/vYmmLxR?editors=1010)
122. [yellamoon](https://codepen.io/pwbzvqja/pen/xxddZaX)
123. [lingxuan](https://codepen.io/penglingxuan/pen/wvddMRV)
124. [pocper1](https://codepen.io/pocper1/pen/vYmmLov)
125. [敬智](https://codepen.io/hjingjhih/pen/yLbbOXX)
126. [Mobius](https://codepen.io/dopamine908/pen/zYwwqym)
127. [Jane Lin](https://codepen.io/as60160/pen/VwbbjwY)
128. [Hwai](https://codepen.io/HwaiChiu/pen/PommZJx)
129. [Chiou](https://codepen.io/daisycml/pen/QWvvEOx)
130. [紅豆豆](https://codepen.io/zoseqlpc/pen/YzVVWQW?editors=1010)
131. [LuYing](https://codepen.io/lilylily819/pen/KKmmMRG)
132. [Allen](https://codepen.io/cwl1121/pen/VwbbKYW)
133. [Kuan](https://codepen.io/mrkuanyi/pen/RwVVGaQ)
134. [Shay](https://codepen.io/fromzeroo/pen/rNmmMjx)
135. [我是泇吟](https://codepen.io/kljuqbxs/pen/qBmmaRm?editors=1010)
136. [Kuma](https://codepen.io/kumalulu/pen/LYyyRez?editors=1111)
137. [Alison](https://codepen.io/AlisonTsou/pen/OJmmREq)
138. [Brook](https://codepen.io/HeroNeverDie072/pen/NWjjRoK)
139. [Linn](https://codepen.io/winnie50431/pen/ZEKKpdL)
140. [Mag](https://codepen.io/maggie31416/pen/NWjjbxG)
141. [HsiaoWen](https://codepen.io/xiaowen/pen/MWmmbMG)
142. [小莊](https://codepen.io/hohayo/pen/oNWWBWX)
143. [葵](https://codepen.io/begoniasuccess/pen/qBmmrWa)
144. [wj_omg](https://codepen.io/wj_omg/pen/Exmmmde)
145. [Churng](https://codepen.io/churng/pen/mdmmBEg)
146. [RC](https://codepen.io/real_chen/pen/wvddrVg?editors=1010)
147. [Pinky Shen](https://codepen.io/pinky_shen/pen/gOWWXPw)
148. [家妃](https://codepen.io/emily_lin/pen/wvddPOj)
149. [謝佳伶](https://codepen.io/lilishe-the-scripter/pen/rNmmpzx)
150. [小肥羊](https://codepen.io/rusheep/pen/RwVVxOe)
151. [sam憲](https://codepen.io/jysggwgq/pen/ExmmQxw)
152. [Jeremy](https://codepen.io/yu_1227/pen/LYyymGx)
153. [Joyce](https://codepen.io/lcijoyce622/pen/poPPVmg)
154. [YSC](https://codepen.io/san__/pen/LYyyreX)
155. [Ben](https://codepen.io/famheoxd/pen/PommayP)
156. [wind](https://codepen.io/wind7y/pen/PommBxJ)
157. [cherry Tsai](https://codepen.io/snowcherry919/pen/ZEKKjNN)
158. [Ching Hua](https://codepen.io/ching-hua-wang/pen/bGWWxwQ)
159. [曾魚魚](https://codepen.io/vkkkmkbv-the-selector/pen/XWRRPMX)
160. [Ant](https://codepen.io/Ant1995/pen/vYmmzoV)
161. [AndyWang](https://codepen.io/zuqpbbgu-the-encoder/pen/abWWQpx)
162. [JumpBow](https://codepen.io/jump-bow/pen/bGWWQro)
163. [黃士桓](https://codepen.io/shr-huan-huang/pen/VwbbVMe)
164. [Nat](https://codepen.io/dxnqcnen/pen/rNmmQPE)
165. [axlrock1021](https://codepen.io/lnjbmmxo/pen/RwVVmvb)
166. [Keith](https://codepen.io/qwrejhic/pen/GRmmVBB)
167. [JC](https://codepen.io/jcsamoyed/pen/ExmmqpN)
168. [Amber_Lin](https://codepen.io/autum55853/pen/rNmwBJY?editors=1010)
169. [whatsupmm](https://codepen.io/meidada/pen/MWmogRr)
170. [miku3920](https://codepen.io/miku3920/pen/eYWRYOr)
171. [fatona](https://codepen.io/stopnstare/pen/mdmwbNy)
172. [Abby](https://codepen.io/abby1125/pen/RwVgNVx)
173. [阿吉](https://codepen.io/Jimmy-Cai/pen/LYyLpPv)
174. [wendy](https://codepen.io/siaochanwu/pen/OJmgyvg)
175. [豪克艾啦](https://codepen.io/hawkeyela/pen/eYWRpXo)
176. [betty](https://codepen.io/betty-hu/pen/BaRZKKg?editors=1010)
177. [andersonshen](https://codepen.io/luxyenni-the-bold/pen/mdmwPpY)
178. [Pear](https://codepen.io/pearli319/pen/LYyLyPe)
179. [ming](https://codepen.io/mm-lium/pen/XWRgRpg)
180. [wei](https://codepen.io/weininglee/pen/GRmEvqO)
181. [宜明](https://codepen.io/yawdnhbm/pen/JjNJrYO)
182. [frank2411](https://codepen.io/wlk0411/pen/VwbWMdq)
183. [shiuanping](https://codepen.io/shiuanping/pen/YzVQYNV)
184. [Allen Lin](https://codepen.io/lcf7891/pen/VwbWyrW)
185. [Ryan Yang](https://codepen.io/RYANYANG1102/pen/GRmExOq?editors=0001)
186. [一美](https://codepen.io/Nulaco/pen/eYWRjGL?editors=1010)
187. [JoanneLin](https://codepen.io/s61227/pen/gOWRjjg)
188. [sam.tang](https://codepen.io/sam_tang/pen/LYyWvjO)
189. [SinHsieh](https://codepen.io/SinHsieh/pen/JjNJmPJ)
190. [AlanLee](https://codepen.io/boolenboom/pen/JjNJmwB?editors=1111)
191. [a-chieh](https://codepen.io/ivychocho54/pen/xxdrQby)
192. [阿儒](https://codepen.io/colinchiu87/pen/ZEKymxM)
193. [Genos](https://codepen.io/pb220416/pen/wvdeQje)
194. [Nick](https://codepen.io/nick-lin/pen/eYWEYej)
195. [jennifershih](https://codepen.io/jennifershih/pen/LYyjVqJ?editors=1111)
196. [Liang](https://codepen.io/oneliang/pen/ZEKJbMM?editors=1010)
197. [kevin huang](https://codepen.io/h2m730131/pen/RwVZGQZ)
198. [Shiny](https://codepen.io/shinychen/pen/BaRdJZY)
199. [kennyyun](https://codepen.io/kennyyun/pen/vYmJbda)
200. [ShihChu](https://codepen.io/ShihChu/pen/eYWEwoL)
201. [KatieZhao](https://codepen.io/katiezhao/pen/dyWzxwN)
202. [BTH](https://codepen.io/Bettyhsu/pen/GRmMEgL?editors=1010)
203. [Limo](https://codepen.io/arabela-syu/pen/oNWGwQR)
204. [Ruby](https://codepen.io/sozqnmzy/pen/NWjaYXr)
205. [Joy Cheng](https://codepen.io/joycheng5432/pen/abWLKXw?editors=1111)
206. [Joyce](https://codepen.io/Joyce-SU/pen/qBmVWMX)
207. [Cami](https://codepen.io/irisLife/pen/WNjXbpZ)
208. [粽粽](https://codepen.io/chanwanchen/pen/xxdPxEY)
209. [Emma](https://codepen.io/emma189/pen/ExmbyoQ)
210. [kg](https://codepen.io/so1so2so34/pen/MWmOjBP?editors=1010)
211. [SeanYeh](https://codepen.io/seaniap/pen/eYWypdd)
212. [Pidder](https://codepen.io/pidderliao/pen/gOWoxjM)
213. [Izumi 泉](https://codepen.io/izumi-dev/pen/eYWyeLv)
214. [Edward](https://codepen.io/Edward_77/pen/oNWpEpz)
215. [Nielsen](https://codepen.io/nielsen_dch/pen/bGWLBra)
216. [moitw](https://codepen.io/tsuifei/pen/LYyQOdz)
217. [Link1515](https://codepen.io/Link1515/pen/ExmQGwE)
218. [Yiren](https://codepen.io/Yiren_Liou/pen/QWvQzJp)
219. [MM](https://codepen.io/MINN3/pen/MWmVXVB)
220. [Lina](https://codepen.io/LinaChen/pen/KKmoxww)
221. [Kaori](https://codepen.io/erxxx4321/pen/GRmxBbX)
222. [Choya](https://codepen.io/vekbuzcn-the-reactor/pen/BaROogd)
223. [Han](https://codepen.io/PeiHan/pen/poPQJMj?editors=1011)
224. [jaehee](https://codepen.io/bvcijcuv-the-decoder/pen/yLXBxGZ)
225. [小儀](https://codepen.io/mio514/pen/BaZaJVd)
226.  [chiakilalala](https://codepen.io/mio514/pen/BaZaJVd)
227.  [pss940909](https://codepen.io/pss940909/pen/wvEdwXJ)