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
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" 做雙向綁定，對應的 data 為 checkbox1。
新增 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 值為 true 與 false，
如果我們要用別的值當作 value，可以設定 true-value 與 false-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: [],
  },
});

勾選之後，option 的 value（雞 / 豬 / 羊）會儲存到 checkboxArray 陣列裡，而勾選的順序就等於 index。
Vue 資料內容如下：

Checkbox

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

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

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

畫面呈現

Radio

Radio 就沒有多選了，只有單選！

新增 v-model 綁定 data 裡的 singleRadio，singleRadio 預設是一個空的字串。
選取任一個 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-model 與 option 裡的 value 將值帶進來。

範例：雙向綁定

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

做表單時常用的小技巧：可以在 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 呈現結果

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