---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 31 - 運用 methods 作為 filter

觀看完課程影音「Methods 方法」後，練習下方題目。

題目
---
運用 [這個模板](https://codepen.io/hexschool/pen/BaPGMQQ)（只能操作 HTML 的部分），並依照註解的要求撰寫程式碼。

> 運用 methods 作為 filter
> 1. 參考範例中 `{{ reverseText(text) }}` 的方法，嘗試在 HTML 第 4 行，輸入特定方法，讓畫面顯示出 $ 1000 。
> 2. 需使用到 Vue data 中的 cash。
> 3. 需求畫面如圖:
> 

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

## 回報流程

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


<!-- 解答：

<div id="app">
{{ reverseText(text) }}
<br>
{{ dollarSign(cash) }}
</div>

https://codepen.io/jmimiding4104/pen/GReJqVv
-->

<!--
額外挑戰：
https://codepen.io/jmimiding4104/pen/VwRLjrv?editors=1111

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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/gOEomWO?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/rNRpyyp) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/ZEPveJa?editors=1011) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/yLwpMvz) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/abMEJEa?editors=1111) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/NWJXjNw) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/RwdxVaR?editors=1011) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/eYXyWVa?editors=1010) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/poYpPaQ) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/GReyEMX?editors=1010) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/JjzMNJo) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/MWxrvWJ) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/VwRyzrO) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/zYbpEoX?editors=1010) |
| KUN. | [CodePen]() |
| shuuu | [CodePen](https://codepen.io/jybvfzos-the-bashful/pen/poYpWYY?editors=1010) |
|wei_Rio|[Codepen](https://codepen.io/wei_wu/pen/abMEVNm?editors=1011)|
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/vYPpWgd?editors=1011) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/rNRpYdM?editors=1010) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/KKEZQLE) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/zYbpWPo?editors=1010) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/RwdxyGO) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/mdopXgB) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/xxBpzNZ) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/KKEZxJX) |
| py | [CodePen](https://codepen.io/Wpypy/pen/NWJXZre) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/rNRpEwx) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/abMEgyB?editors=1010) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/VwRyJVx)
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/JjzMgbv?editors=1010) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/NWJyxBR) |
| Eden |[Codepen](https://codepen.io/iseden/pen/qBvxbvg)|
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/QWoQxbg?editors=1010) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/KKEQeaZ) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/xxBYaLY?editors=1010) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/xxBYmoy) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/rNRJRbL) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/qBvxzrN) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/ExMErXe) |
| Ting | [CodePen](https://codepen.io/liara/pen/ZEPrLWg) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/PoLBmox) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/oNVaKpv) |
| Pikachu | [CodePen](https://codepen.io/_pikachu_/pen/eYXQEVj) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/XWGQwWg) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/BabeXqG) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/rNbNzKQ?editors=1010) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/YzMqaoN) |

<!--
| user | [CodePen]() |
-->