Vue 初心者筆記 #6 表單資料雙向綁定
本文介紹以 Vue 製作表單元件的技巧,包括 Input、Textarea、Checkbox、Radio、Select 等表單元素的使用。
Text Input
對表單資料
<input type="text">
做雙向綁定,對應的data
為text
。
新增 v-model
綁定 data
裡的 text
,當使用者輸入內容的同時,text
的值會跟著改變並呈現於畫面上。
1 | <input type="text" class="form-control" v-model="text" /> {{ text }} |
1 | var app = new Vue({ |
常用的 v-model 修飾符
.lazy
加入 lazy
修飾符後,要按下 Enter
或是在旁邊點擊一下,資料才會繪製出來,不會在輸入時就馬上更新畫面。
例如:
1 | <input type="text" v-model.lazy="lazyMsg" /> {{ lazyMsg }} |
.number
我們可以藉由 number
這個修飾符,將連接的字串資料轉為純數值的格式。
使用
typeof()
可以發現<input type="number">
輸出並儲存的資料是「字串」格式
1 | <input type="number" v-model.number="age" /> |
.trim
加入 trim
修飾符,可以把字串「前後」多餘的空白去除。
1 | <input type="text" v-model.trim="trimMsg" /> {{ trimMsg }}緊黏的文字 |
Textarea
新增 v-model
綁定 data
裡的 textarea
,當使用者輸入內容的同時,textarea
的值跟著改變並呈現於畫面上。
1 | <pre>{{ textarea }}</pre> |
1 | var app = new Vue({ |
Checkbox
單選 Checkbox
對表單資料 input type="checkbox"
做雙向綁定,對應的 data
為 checkbox1
。
新增 v-model
綁定 data
裡的 checkbox1
:
1 | <input type="checkbox" id="check1" v-model="checkbox1" /> |
1 | var app = new Vue({ |
單選與多選是依據 Checkbox 的數量而定,
單一個就是單選 (true or false)、多個就是多選 (array)。
複選框
上面的單選 Checkbox 預設的 value
值為 true
與 false
,
如果我們要用別的值當作 value
,可以設定 true-value
與 false-value
屬性。
範例:
1 | <input |
1 | var app = new Vue({ |
這裡因為資料 data: { sex: '男生', }
預設的值就是 true-value
,所以 Checkbox 預設為已勾選的狀態。
多選 Checkbox
新增 v-model
綁定 data
裡的 checkboxArray
。
依據 Checkbox 的數量,可以知道這邊的 Checkbox 是 Array 的格式。
1 | <input type="checkbox" id="check2" value="雞" v-model="checkboxArray" /> |
1 | var app = new Vue({ |
勾選之後,option
的 value
(雞 / 豬 / 羊)會儲存到 checkboxArray
陣列裡,而勾選的順序就等於 index
。
Vue 資料內容如下:
如果要把陣列資料呈現到畫面上,我們可以使用 v-for
把陣列的值一一抓出來。
1 | <span v-for="item in checkboxArray">{{ item }} </span> |
最後畫面呈現的順序,就會跟加入陣列的順序 (index) 一樣。
Radio
Radio 就沒有多選了,只有單選!
新增 v-model
綁定 data
裡的 singleRadio
,singleRadio
預設是一個空的字串。
選取任一個 radio
後,它的 value
會賦予到 singleRadio
上,然後花括號吃到 singleRadio
的值就會把資料呈現至畫面。
1 | <input type="radio" id="radio2" value="雞" v-model="singleRadio" /> |
1 | var app = new Vue({ |
Select
select
標籤可以透過它的 v-model
與 option
裡的 value
將值帶進來。
範例:雙向綁定
新增 v-model
綁定 data
裡的 selected
,selected
預設為一個空字串。
因為 selected
預設是空值,所以這邊第一個 option
的 value
留空的話,就會是預設值。
做表單時常用的小技巧:可以在
option
上加入disabled
讓使用者選到其他的選項之後,沒辦法再選回「請選擇」的選項
1 | <select v-model="selected"> |
1 | var app = new Vue({ |
option
標籤裡面的文字內容跟value
的值可以不一樣。
例如:<option value="阿姨">漂亮阿姨</option>
補充:透過 v-for 製作 Select 裡面的資料
在 option
裡面使用 v-for
:
注意:因為
value
變成動態的屬性,所以前面要記得加v-bind
。
1 | <select v-model="selected2"> |
1 | var app = new Vue({ |
補充:多選的 Select
利用 HTML 的特性,加上 multiple
屬性,就可以變成多選。
Windows 可透過 shift 或 ctrl 來多選
1 | <select multiple v-model="multiSelected"> |
1 | var app = new Vue({ |
最後使用 v-for
來呈現結果
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。