iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
自我挑戰組

新手遇上Vue.js系列 第 6

Day6 輸入框介紹

  • 分享至 

  • xImage
  •  

看完上一篇的輸入,今天來介紹不一樣表單元件

Input text
https://ithelp.ithome.com.tw/upload/images/20210920/20140076kKHhz5GrU5.png
https://ithelp.ithome.com.tw/upload/images/20210920/201400766Tq0ZyyTjm.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076Q8XMGPOsW4.png

Textarea多行文字
https://ithelp.ithome.com.tw/upload/images/20210920/20140076ASRDh68NP4.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076ZRjNa8HYem.png

Checkbox複選框
https://ithelp.ithome.com.tw/upload/images/20210920/20140076q1jaP0ZwDn.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076tbqdRqz6WO.png
https://ithelp.ithome.com.tw/upload/images/20210920/201400761wF0FDpoBx.png

這裡將多個checkbox設同一群組,box為一陣列存放勾選的value字串

Radio Button單選按鈕
https://ithelp.ithome.com.tw/upload/images/20210920/20140076eGPZt0FJKj.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076MKhWulkwUc.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076ZpFInuN3Xw.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076GL0iYzyRub.png
這裡v-model的值綁定為box,一開始為選擇任何按鈕所以設定為為選擇

Select 下拉選單
https://ithelp.ithome.com.tw/upload/images/20210920/20140076jUDYIAKzzI.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076q8XDdB5lnL.png
https://ithelp.ithome.com.tw/upload/images/20210920/2014007646yzUMwYev.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076tlUofFkN2d.png

今天輸入框的部分就到這邊,明天會來說說計算屬性(Computed)

參考資料: https://vuejs.org/v2/guide/computed.html


上一篇
Day 5 雙向綁定及迴圈
下一篇
Day7 計算屬性 Computed
系列文
新手遇上Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言