iT邦幫忙

2021 iThome 鐵人賽
DAY 6
0
自我挑戰組

新手遇上Vue.js系列 第 6 篇

Day6 輸入框介紹

13th鐵人賽
475 瀏覽

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

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.js 共 30 篇
  1. 26
    Day26 子元件與父元件
  2. 27
    Day27 slot
  3. 28
    Day28 plugin
  4. 29
    Day29 Mixin
  5. 30
    Day30 賽後心得
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙