Vue 初心者筆記 #6 表單資料雙向綁定

本文介紹以 Vue 製作表單元件的技巧,包括 Input、Textarea、Checkbox、Radio、Select 等表單元素的使用。

Text Input

對表單資料 <input type="text"> 做雙向綁定,對應的 datatext

新增 v-model 綁定 data 裡的 text,當使用者輸入內容的同時,text 的值會跟著改變並呈現於畫面上。

1
<input type="text" class="form-control" v-model="text" /> {{ text }}
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
text: '',
},
});

常用的 v-model 修飾符

.lazy

加入 lazy 修飾符後,要按下 Enter 或是在旁邊點擊一下,資料才會繪製出來,不會在輸入時就馬上更新畫面。
例如:

1
<input type="text" v-model.lazy="lazyMsg" /> {{ lazyMsg }}

.number

我們可以藉由 number 這個修飾符,將連接的字串資料轉為純數值的格式。

使用 typeof() 可以發現 <input type="number"> 輸出並儲存的資料是「字串」格式

1
2
<input type="number" v-model.number="age" />
<pre>{{ typeof(age) }} {{ age }}</pre>

.trim

加入 trim 修飾符,可以把字串「前後」多餘的空白去除。

1
<input type="text" v-model.trim="trimMsg" /> {{ trimMsg }}緊黏的文字

Textarea

新增 v-model 綁定 data 裡的 textarea,當使用者輸入內容的同時,textarea 的值跟著改變並呈現於畫面上。

1
2
<pre>{{ textarea }}</pre>
<textarea cols="30" rows="3" class="form-control" v-model="textarea"></textarea>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
textarea: '',
},
});

Checkbox

單選 Checkbox

對表單資料 input type="checkbox" 做雙向綁定,對應的 datacheckbox1
新增 v-model 綁定 data 裡的 checkbox1

1
2
<input type="checkbox" id="check1" v-model="checkbox1" />
<label for="check1"> 你要不要看電影 </label>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
checkbox1: false,
},
});

單選與多選是依據 Checkbox 的數量而定,
單一個就是單選 (true or false)、多個就是多選 (array)。

複選框

上面的單選 Checkbox 預設的 value 值為 truefalse
如果我們要用別的值當作 value,可以設定 true-valuefalse-value 屬性。

範例:

1
2
3
4
5
6
7
8
<input
type="checkbox"
id="sex"
v-model="sex"
true-value="男生"
false-value="女生"
/>
<label for="sex">{{ sex }}</label>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
sex: '男生',
},
});

這裡因為資料 data: { sex: '男生', } 預設的值就是 true-value,所以 Checkbox 預設為已勾選的狀態。

多選 Checkbox

新增 v-model 綁定 data 裡的 checkboxArray
依據 Checkbox 的數量,可以知道這邊的 Checkbox 是 Array 的格式。

1
2
3
4
5
6
7
8
9
10
<input type="checkbox" id="check2" value="雞" v-model="checkboxArray" />
<label for="check2"></label>

<input type="checkbox" id="check3" value="豬" v-model="checkboxArray" />
<label for="check3"></label>

<input type="checkbox" id="check4" value="牛" v-model="checkboxArray" />
<label for="check4"></label>

<p>晚餐火鍋裡有 <span v-for="item in checkboxArray">{{ item }} </span></p>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
checkboxArray: [],
},
});

勾選之後,optionvalue(雞 / 豬 / 羊)會儲存到 checkboxArray 陣列裡,而勾選的順序就等於 index
Vue 資料內容如下:

Checkbox

如果要把陣列資料呈現到畫面上,我們可以使用 v-for 把陣列的值一一抓出來。

1
<span v-for="item in checkboxArray">{{ item }} </span>

最後畫面呈現的順序,就會跟加入陣列的順序 (index) 一樣。

畫面呈現

Radio

Radio 就沒有多選了,只有單選!

新增 v-model 綁定 data 裡的 singleRadiosingleRadio 預設是一個空的字串。
選取任一個 radio 後,它的 value 會賦予到 singleRadio 上,然後花括號吃到 singleRadio 的值就會把資料呈現至畫面。

1
2
3
4
5
6
7
8
9
10
<input type="radio" id="radio2" value="雞" v-model="singleRadio" />
<label for="radio2"></label>

<input type="radio" id="radio3" value="豬" v-model="singleRadio" />
<label for="radio3"></label>

<input type="radio" id="radio4" value="牛" v-model="singleRadio" />
<label for="radio4"></label>

<p>晚餐火鍋裡有 {{ singleRadio }}。</p>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
singleRadio: '',
},
});

Select

select 標籤可以透過它的 v-modeloption 裡的 value 將值帶進來。

範例:雙向綁定

新增 v-model 綁定 data 裡的 selectedselected 預設為一個空字串。
因為 selected 預設是空值,所以這邊第一個 optionvalue 留空的話,就會是預設值。

做表單時常用的小技巧:可以在 option 上加入 disabled 讓使用者選到其他的選項之後,沒辦法再選回「請選擇」的選項

1
2
3
4
5
6
7
<select v-model="selected">
<option disabled value="">請選擇</option>
<option value="小美">小美</option>
<option value="可愛小妞">可愛小妞</option>
<option value="漂亮阿姨">漂亮阿姨</option>
</select>
<p>小明喜歡的女生是 {{ selected }}。</p>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
selected: '',
},
});

option 標籤裡面的文字內容跟 value 的值可以不一樣。
例如:<option value="阿姨">漂亮阿姨</option>

補充:透過 v-for 製作 Select 裡面的資料

option 裡面使用 v-for

注意:因為 value 變成動態的屬性,所以前面要記得加 v-bind

1
2
3
4
5
<select v-model="selected2">
<option value="" disabled>請選擇</option>
<option :value="item" v-for="item in selectData">{{ item }}</option>
</select>
<p>小明喜歡的女生是 {{ selected2 }}。</p>
1
2
3
4
5
6
7
var app = new Vue({
el: '#app',
data: {
selectData: ['小美', '可愛小妞', '漂亮阿姨'],
selected2: '',
},
});

補充:多選的 Select

利用 HTML 的特性,加上 multiple 屬性,就可以變成多選。

Windows 可透過 shift 或 ctrl 來多選

1
2
3
4
5
6
<select multiple v-model="multiSelected">
<option value="小美">小美</option>
<option value="可愛小妞">可愛小妞</option>
<option value="漂亮阿姨">漂亮阿姨</option>
</select>
<p>小明喜歡的女生是 <span v-for="item in multiSelected">{{ item }} </span></p>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
multiSelected: [],
},
});

最後使用 v-for 來呈現結果

v-for 呈現結果

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。