---
# System prepended metadata

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

---


# 🗞 7/29(四) 每日任務

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

## 題目
使用 methods 操作資料
>請複製 （右下角 fork）[這個範例](https://codepen.io/rider159159/pen/LYyLLxK)，並執行以下要求：
>- 在 HTML 中有一個 button，以及一個已使用 v-bind 綁定上樣式的 span 標籤
請同學在 Vue 中補上 methods 
並在 methods 裡面建立一個方法 (方法名稱同學可自訂)
接著使用 v-on 將建立的方法綁定在按鈕身上 
使點擊按鈕後實現以下功能：
>1. 將 span 的背景色由 black 改為 blue 
>2. 將 course 由 test 改為 Vue 夏令營


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


## 作業投稿區(學員自行投稿)
1. [Ryder 範例投稿](https://codepen.io/rider159159/pen/gOWRRrP)
2. [WangShuan](https://codepen.io/WangShuan/pen/dyWZKop?editors=1010)
3. [小韭菜](https://codepen.io/jhang-jhe-wei/pen/bGWLNWp)
4. [Jack](https://codepen.io/yxzzktmb/pen/WNjMbZo?editors=1010)
5. [Bucky](https://codepen.io/bucky-3414/pen/bGWLNre?editors=1010)
6. [詠銓](https://codepen.io/GGfish26/pen/abWqzVa)
7. [Ryan](https://codepen.io/ryanwu1003/pen/dyWdPeE)
8. [陳sam](https://codepen.io/euldpliv/pen/bGWLNPR)
9. [Zackaz](https://codepen.io/zackaz/pen/WNjMbqZ)
10. [紅茶柚o](https://codepen.io/stp9640502/pen/PomRJbz)
11. [洋蔥](https://codepen.io/mikeyam/pen/gOWeGRw)
12. [LMY](https://codepen.io/l_umei/pen/gOWeGWM)
13. [Boris Huang](https://codepen.io/boris0510/pen/dyWmVzy)
14. [Stanley](https://codepen.io/stanley-yeh/pen/YzVarVP)
15. [肉鬆](https://codepen.io/klrkicog/pen/yLbKzPE)
16. [Nap](https://codepen.io/o0o0o1o0/pen/ZEKxXvM)
17. [AnAn](https://codepen.io/AndyAnn/pen/OJmvxgW?editors=1010)
18. [JarvisYu](https://codepen.io/jarvis1993/pen/bGWvovo)
19. [Alison](https://codepen.io/AlisonTsou/pen/BaRrwVZ)
20. [Morris](https://codepen.io/morrisss/pen/MWmVEbG)
21. [Link1515](https://codepen.io/Link1515/pen/poPLWZZ)
22. [SeanYeh](https://codepen.io/seaniap/pen/ZEKxXPw)
23. [jennifershih](https://codepen.io/jennifershih/pen/XWREeay)
24. [Allen Lin](https://codepen.io/lcf7891/pen/eYWMGwo)
25. [weiwei](https://codepen.io/mihtcmff-the-typescripter/pen/abWYVOz?editors=1010)
26. [翁偉凌](https://codepen.io/wengweiling/pen/ZEKxXgP)
27. [Jax](https://codepen.io/cvecve147/pen/mdmxqeM)
28. [wendy](https://codepen.io/siaochanwu/pen/QWvmOjZ)
29. [JackyYu](https://codepen.io/nemoya16/pen/KKmoyVb)
30. [Gui](https://codepen.io/guitimliu/pen/YzVaEZQ)
31. [Jin](https://codepen.io/Jin-L/pen/XWREzMJ)
32. [Yu](https://codepen.io/justyu2001/pen/xxdWPPE)
33. [Eric](https://codepen.io/ericyericy/pen/dyWmZVW)
34. [Wuu](https://codepen.io/coolwuu/pen/qBmoVym)
35. [Genos](https://codepen.io/pb220416/pen/poPLdQz)
36. [Jessy](https://codepen.io/jessy-shen/pen/KKmoyJP?editors=1010)
37. [Sandra](https://codepen.io/yuying-toro/pen/zYwWPLB)
38. [小艾](https://codepen.io/bolaslien/pen/xxdWPBd)
39. [Howard](https://codepen.io/yawdnhbm/pen/KKmoyLK?editors=1111)
40. [Saiki](https://codepen.io/rostpfette/pen/qBmoVzP)
41. [tina](https://codepen.io/yyuunn/pen/KKmoZPw)
42. [家妃](https://codepen.io/emily_lin/pen/LYydepQ)
43. [Chiang](https://codepen.io/ChiangJ/pen/LYydeVe?editors=1011)
44. [Ching Hua](https://codepen.io/ching-hua-wang/pen/QWvmajW)
45. [Bear](https://codepen.io/adaibear/pen/LYydebd)
46. [shiuanping](https://codepen.io/shiuanping/pen/ExmEoWw)
47. [黃士桓](https://codepen.io/shr-huan-huang/pen/GRmxyEL)
48. [Eva](https://codepen.io/hiYifang/pen/BaRrJpX?editors=1010)
49. [andersonshen](https://codepen.io/luxyenni-the-bold/pen/xxdWpLY)
50. [阿丁兒](https://codepen.io/dingpachan/pen/yLbKpoV)
51. [Will](https://codepen.io/WILL_Wu/pen/ExmEoXb)
52. [Ruby](https://codepen.io/sozqnmzy/pen/abWYEYY)
53. [guyu](https://codepen.io/guyu-su/pen/LYydeBg?editors=1010)
54. [Linn](https://codepen.io/winnie50431/pen/eYWMyYd)
55. [安安](https://codepen.io/leave3310-the-looper/pen/poPLpqP)
56. [Joi](https://codepen.io/Joi-Chen/pen/YzVaewK)
57. [Betty](https://codepen.io/gtut3252300/pen/dyWmdyE?editors=1010)
58. [CT](https://codepen.io/ctsvenja/pen/KKmoQZo)
59. [Shay](https://codepen.io/fromzeroo/pen/xxdWpQJ)
60. [frank2411](https://codepen.io/wlk0411/pen/mdmxXKr)
61. [黑川](https://codepen.io/kurokawa/pen/oNWqEqN)
62. [Yu Sung](https://codepen.io/kevin-hsu-the-encoder/pen/NWjYyya?editors=1011)
63. [JC](https://codepen.io/jcsamoyed/pen/jOmzZpz?editors=1010)
64. [小肥羊](https://codepen.io/rusheep/pen/XWREZQw)
65. [timothy80617](https://codepen.io/timothy_hippo/pen/PomRQbz?editors=1011)
66. [yuyu](https://codepen.io/yuyu0905/pen/KKmoQjx)
67. [moitw](https://codepen.io/tsuifei/pen/GRmxxNO)
68. [longgggg](https://codepen.io/long1229/pen/ExmEEWV)
69. [YC Lu](https://codepen.io/YCLu/pen/zYwWWWr)
70. [samuel823](https://codepen.io/samuelshing/pen/mdmxxQL)
71. [Izumi 泉](https://codepen.io/izumi-dev/pen/RwVMMEy)
72. [Mag](https://codepen.io/maggie31416/pen/PomRQgK?editors=1010)
73. [curry](https://codepen.io/Ted19851223/pen/rNmdvVW)
74. [Kowin](https://codepen.io/kowin/pen/WNjzJjv)
75. [Mao](https://codepen.io/vsfvjiuv-the-typescripter/pen/JjNLLpb?editors=0010)
76. [axlrock1021](https://codepen.io/andy1021/pen/MWmVGZo)
77. [wind](https://codepen.io/wind7y/pen/KKmoeqZ)
78. [MM](https://codepen.io/MINN3/pen/wvdmXxq)
79. [JohnnyChao](https://codepen.io/yuanjyun/pen/VwbXGex?editors=1010)
80. [佳鈴](https://codepen.io/zpyfpsxa/pen/RwVMYPY?editors=1010)
81. [GuanXian](https://codepen.io/cgx871220/pen/wvdmEoV?editors=1111)
82. [謝佳伶](https://codepen.io/lilishe-the-scripter/pen/qBmoMLM)
83. [Mobius](https://codepen.io/dopamine908/pen/poPLxor)
84. [Jane Lin](https://codepen.io/as60160/pen/ZEKxqvj)
85. [HSY](https://codepen.io/Hsy_00/pen/MWmVBEN?editors=1011)
86. [miku3920](https://codepen.io/miku3920/pen/PomRxOe)
87. [SunWEi](https://codepen.io/sunweiii/pen/MWmVzVg)
88. [AmberCYT](https://codepen.io/amberTing/pen/ZEKxmZb?editors=1111)
89. [D.E.](https://codepen.io/ailentde/pen/vYmRvKz)
90. [kimn](https://codepen.io/kimn/pen/KKmooQL)
91. [Mia](https://codepen.io/whfan96/pen/OJmvrmY)
92. [shiuan](https://codepen.io/prankaChang/pen/PomRXOr)
93. [AhChao](https://codepen.io/AhChao/pen/rNmdPev)
94. [Avery](https://codepen.io/averyhsutw/pen/NWjYoNd)
95. [Nat](https://codepen.io/dxnqcnen/pen/poPLGPp)
96. [phoebe](https://codepen.io/phoebe4561/pen/vYmmLxR?editors=1010)
97. [Lina](https://codepen.io/LinaChen/pen/BaRrbEv)
98. [Noin](https://codepen.io/Noin/pen/abWYxXG)
99. [JoanneLin](https://codepen.io/s61227/pen/GRmxLwb)
100. [sam.tang](https://codepen.io/sam_tang/pen/BaRrEBM)
101. [Helen](https://codepen.io/helen75816/pen/XWRELgW?editors=1010)
102. [annycheng](https://codepen.io/chengyu0228/pen/NWjYQjK)
103. [tony](https://codepen.io/tony0831-l/pen/BaRxNXw)
104. [Megan Chen](https://codepen.io/megan_cc/pen/XWRqXxe)
105. [ET](https://codepen.io/et0115/pen/gOWzPZV)
106. [Nick](https://codepen.io/nick-lin/pen/jOmxWjV)
107. [Yen](https://codepen.io/skxydvbs/pen/xxdjOgG)
108. [Chu kuohua](https://codepen.io/chukuohua/pen/WNjJxPm)
109. [wj_omg](https://codepen.io/wj_omg/pen/GRmdjjY)
110. [KFC](https://codepen.io/kuan-fu-chen/pen/poPLVQe)
111. [yojanni](https://codepen.io/unayo/pen/JjNvWoN?editors=1010)
112. [Katie Zhao](https://codepen.io/katiezhao/pen/KKmRvBz)
113. [RitaHuang](https://codepen.io/Rita-Rossweisse/pen/qBmYZJe)
114. [yuki](https://codepen.io/sihyu/pen/XWRqxMq)
115. [RC](https://codepen.io/real_chen/pen/vYmjVqL?editors=1010)
116. [敬智](https://codepen.io/hjingjhih/pen/eYWrxjK)
117. [Daisord](https://codepen.io/daisord/pen/dyWeENr)
118. [lingxuan](https://codepen.io/rostpfette/pen/qBmoVzP?editors=1010)
119. [Chien](https://codepen.io/xxchein/pen/ZEKopvB?editors=1011)
120. [SinHsieh](https://codepen.io/SinHsieh/pen/ZEKRWWy)
121. [Churng](https://codepen.io/churng/pen/MWmGRbw)
122. [Kuan](https://codepen.io/mrkuanyi/pen/qBmKaBq)
123. [Keith](https://codepen.io/qwrejhic/pen/rNmKMrW)
124. [Kaori](https://codepen.io/erxxx4321/pen/dyWKOgB)
125. [fsyp2000](https://codepen.io/fsyp2000/pen/zYwamrE)
126. [Chiou](https://codepen.io/daisycml/pen/vYmrVWw)
127. [Yi-Jung](https://codepen.io/yi-jung/pen/BaRVGxm)
128. [阿儒](https://codepen.io/colinchiu87/pen/ZEKRPBM)
129. [艾草](https://codepen.io/jmkhsutp/pen/PomBWpb?editors=1010)
130. [Edward](https://codepen.io/Edward_77/pen/vYmaePq)
131. [Abby](https://codepen.io/abby1125/pen/MWmBVBP?editors=1010)
132. [曾魚魚](https://codepen.io/vkkkmkbv-the-selector/pen/jOmpdYq)
133. [NieR](https://codepen.io/dennis8499/pen/MWmqYgZ)
134. [Ryan Yang](https://codepen.io/RYANYANG1102/pen/wvdEBpx?editors=1010)
135. [Lina](https://codepen.io/night2n/pen/oNWPXBq)
136. [poko](https://codepen.io/mingxuan-hsu/pen/poPOyJv)
137. [一美](https://codepen.io/Nulaco/pen/yLbRLBg?editors=1010)
138. [Amber_Lin](https://codepen.io/autum55853/pen/qBmJWGY?editors=1011)
139. [Zhao Chen](https://codepen.io/zhao1995chen/pen/gOWBNdb)
140. [Parsons](https://codepen.io/tom00502/pen/YzVRPqP)
141. [Ant](https://codepen.io/Ant1995/pen/ZEKmaJe)
142. [Han](https://codepen.io/PeiHan/pen/jOmQagm?editors=1010)
143. [LuYing](https://codepen.io/lilylily819/pen/wvdQjqd)
144. [james](https://codepen.io/hong-wei/pen/MWmLrJm)
145. [Yiren](https://codepen.io/Yiren_Liou/pen/xxrKXeP)
146. [Joy Cheng](https://codepen.io/joycheng5432/pen/RwZRWgM)
147. [betty](https://codepen.io/betty-hu/pen/abYGdQd)