---
# System prepended metadata

title: "\U0001F3C5 Day 25 - input 型別"
tags: [Vue 直播班 - 2023 冬季班]

---

---
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 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  
<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]() | 

-->
