---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 25 - input 型別

題目
---
請操作 [這個模板](https://codepen.io/hexschool/pen/jOByPZr?editors=1011) （只能操作 HTML 的部分），依照以下要求撰寫程式碼。

> 請確保在範例中的 input 所輸入的數字會被轉換成「數字型別」。
>
> [Vue.js 參考文件](https://cn.vuejs.org/guide/essentials/forms#number)

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

## 回報流程

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


<!-- 解答：
<div id="app" class="p-3">
<input type="number" v-model.number="num">
{{ typeof num }}
</div>

https://codepen.io/jmimiding4104/pen/WNmNroe

額外挑戰：
https://codepen.io/jmimiding4104/pen/jOJOWVE
https://cn.vuejs.org/guide/essentials/forms#modifiers

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

回報區
---

| Discord | CodePen / 答案 |
|:----------------|:----------------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/qBvmmLQ?editors=1011) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/PoLmGoE) |
| pikachu | [CodePen](https://codepen.io/_pikachu_/pen/zYbwzrm) |
| fabio20 | [CodePen](https://codepen.io/fabio7621/pen/JjzNJXV?editors=1001) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/VwRbWaZ) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/MWxmoeG) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/LYayLxw?editors=1011) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/abMWwdP) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/VwRbbJJ) |
| andrea | [CodePen](https://codepen.io/Wpypy/pen/XWGRgeO?editors=1011) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/abMWwyx) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/XWGRgZG?editors=1011) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/vYPmZRK?editors=1011) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/qBvmjKB) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/WNmjOOX) |
| dora | [CodePen](https://codepen.io/dorayu/pen/LYayLeY?editors=1011) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/QWovgYx?editors=0010) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/NWJjgQz) |
| RyanC | [CodePen](https://codepen.io/RyanYD/pen/xxBdryK?editors=1011) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/ZEPKJpg) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/qBvmXZN?editors=1010) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/QWovMdY) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/zYbwdJK?editors=1010) |
| ⭐️小正| [CodePen](https://codepen.io/colorgolden/pen/XWGReKg?editors=1011) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/rNRmGJG) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/RwdVLYz) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/zYbwPmQ?editors=1011) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/JjzNOVd?editors=1011) |
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/WNmjdLq?editors=1011)|
| Leo |[CodePen](https://codepen.io/Aruminiya/pen/WNmjMBR)|
|Eden|[Codepen](https://codepen.io/iseden/pen/BabRrVd)|
| MY | [CodePen](https://codepen.io/ahmomoz/pen/RwdVyVj) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/bGZWMxz?editors=1011) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/NWJjzpP?editors=1011) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/PoLmaMP?editors=1010) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/xxBdzvy) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/mdomKNd) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/xxBdaGG?editors=1011) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/BabRqzg?editors=1011) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/mdomzaN?editors=1010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/KKEmGyM) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/LYayBPa?editors=1011) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/NWJjoVR)|
| PoWei#8484 |[CodePen](https://codepen.io/Po-Wei-Lai/pen/JjzNqNp?editors=1011)|
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/poYPXgW?editors=1011) |
| 翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/gOEWNJW) |
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/wvOdVrx) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/qBvjdBX) |
| Ting | [CodePen](https://codepen.io/liara/pen/vYPZLde)|
| hua | [CodePen](https://codepen.io/LHua/pen/XWGgNNp) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/poYwNLb?editors=1011) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/poYwRZL?editors=1010) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/BabZpMZ) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/xxBrrKJ) |
| 鮮奶油櫻桃煎餅 | [CodePen](https://codepen.io/mattielin/pen/dyrRzaz?editors=1011) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/PoLjJyM?editors=1011) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/yLwXjKr) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/QWogxwX?editors=1011) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/eYXRKBz) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/KKEqrWq?editors=1011)|
|Yang|[CodePen](https://codepen.io/Yang-J/pen/poYwqjO)|
|WEI|[CodePen](https://codepen.io/wei-z/pen/poYwGpg)|
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/QWogPrJ?editors=1011) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/OJqjWwX?editors=1011) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/poYrepQ?editors=1011) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/XWGagdz?editors=1010) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/eYXEGxg)
| chris | [CodePen](https://codepen.io/cjtseng07/pen/eYXEeWe) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/RwdZOwW?editors=1011) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/MWxvdWM?editors=1010) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/Babwoqj?editors=1011) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/bGZovmp?editors=1011) |
| _amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/GReygRb?editors=1011) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/oNVpyOY?editors=1011) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/gOEeqaO?editors=1011)|
|WA|[Codepen](https://codepen.io/ldddl/pen/MWxdPjb)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/LYvpWer) |

<!--

| Discord | [CodePen]() |

-->