在別人都完成30天鐵人賽的路上，我真的是太難了QQ，我才發現我一個禮拜的產量竟然只有1-2篇，在看文件的時候才發現自己之前練習 Vue 遇到的問題，真的是絕大部分都能找出答案，儘管在鐵人賽期間我沒辦法完成整整30篇文章(我覺得我的 component 系列應該還要很久才能完成)，但我之後還是會努力將整個 Vue 文件讀完之後寫成筆記的。

接下來就來看看如何讓畫面上的 <input>、<textarea> 及 <select> 跟 Vue 資料如何做雙向連結吧！

v-model 指令來完成表單元素的雙向綁定

在表單元素使用 v-model 指令，則在表單元素上設定的屬性(Attribute)值會被忽略，而是使用 v-model 指令所綁定的資料，像是 value、checked、selected 等屬性值，即使在 HTML 中設定了預設值，最後畫面顯示的還是在 v-model 指令所綁定的資料。
所以使用了 v-model 指令後，要設定 value、checked、selected 等屬性的初始值的話，應該在 Vue 實例的 data 中設定。

單行(input)及多行(textarea)文本

<!--value="edit me"不會顯示在畫面上-->
<input type="text"  v-model="message" value="edit me">
<!--可以使用屬性placeholder作為沒有空值的替代文字-->
<textarea v-model="message" placeholder="add multiple lines"></textarea>

<script>
const vm = new Vue({
  el:'#vm',
  data:{
    //畫面上的輸入欄位顯示的值↓
    message:'編輯'
  }
})
</script>

單選(type="radio")、複選(type="checkbox")按鈕及下拉式選單(select)

<input> 單選(type="radio")

一定要在 input 中設定 value 屬性，因為 Vue 是利用 value 屬性的值做響應的。也就是說被點選的按鈕，會將 value 屬性的值傳送到 v-model 綁定的資料裡。

<label for="male"><input type="radio" id="male" value="male" v-model="gender" name="gender">Male</label>
<label for="female"><input type="radio" id="female" value="female" v-model="gender">Female</label>

<script>
const vm = new Vue({
  el:'#vm',
  data:{
    gender: ''
  }
})
</script>

如上例，利用 v-model="gender" 讓 Vue 實例的資料跟畫面顯示的值做響應，當點選 Male 時， value 的值 male 就會連動到 Vue 實例的資料(gender)中，當改點選 Female 時， gender 的資料值也會同時改變。

<input> 複選(type="checkbox")

沒有 value 屬性

在沒有 value 屬性的狀況下，複選按鈕的資料會呈現布林值(true或false)。

<label for="contract"><input type="checkbox" id="contract" v-model="contract" name="contract">Agree Contract</label>
<script>
const vm = new Vue({
  el:'#vm',
  data:{
    // 預設值設為false
    contract: false
  }
})
</script>

有 value 屬性

作為複選按鈕，要將這些被選取的資料連動到同一筆資料時，那麼綁定的資料要是陣列，如此才能夠容納多筆 value 值。

<label for="dog"><input type="checkbox" id="dog" value="dog" name="animal" v-model="animalArr">dog</label>
<label for="cat"><input type="checkbox" id="cat" value="cat" name="animal" v-model="animalArr">cat</label>
<label for="tiger"><input type="checkbox" id="tiger" value="tiger" name="animal" v-model="animalArr">tiger</label>
<script>
const vm = new Vue({
  el:'#vm',
  data:{
    // 預設畫面顯示被點選的值
    animalArr: ['tiger']
  }
})
</script>

• 陣列的排序就是點選的順序。
• 儲存在陣列中的值會是字串，除非使用修飾符 .number 。

下拉式選單(select)

MDN 中對 <option> 的屬性 value 的說明：
The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.

如果屬性 value 被省略，那麼 <option> 的文字內容就會被當成 value 值送出去。

單選

<select v-model="cellphone">
  <!--有value傳value，沒有value就傳包含的文字-->
  <option disabled value="">請選擇</option>
  <option>三星</option>
  <option>蘋果</option>
  <option>oppo</option>
</select>
<script>
const vm = new Vue({
  el:'#vm',
  data:{
    // 預設的值要能跟上面其中一個的 value 值吻合，否則畫面的下拉選單初始值會是空白的
    // 如果預設要是第一個請選擇的話，可以把 value 值設為空值
    cellphone:''
  }
})
</script>

複選

• <select> 要加上屬性 multiple才能變成複選。
• 點選時，需透過 ctrl 加滑鼠點擊才能成功變成複選。
• 響應的資料會是陣列型別。
• 不像上面的 <input type="checkbox"> 複選，響應式資料的排序結果會按照點選的順序，而複選的下拉式選單的資料響應式資料的排序結果則是依據畫面上資料的的排序。

<!--下拉式選單要是複選要加上屬性multiple-->
<select v-model="watch" multiple>
  <option disabled  value="">請選擇</option>
  <option>Omega</option>
  <option>蘋果</option>
  <option>Garmin</option>
</select>
<script>
const vm = new Vue({
  el:'#vm',
  data:{
    // 複選的響應資料要是陣列
    //3個都點選的結果，資料一定是[ "Omega", "蘋果", "Garmin" ]
    watch:[]
  }
})
</script>

修飾符

.lazy

將表單的 input 事件變成 change 事件。
事件發生的時機點從輸入變成焦點移開。

<input type="text" v-model.lazy="message2" value="edit me">

change 事件 跟 input 事件的差異：

針對 <input type="text">
發生時機：
change：沒有 focus 在表單元素上時(當滑鼠焦點移開時)才發生。
input：輸入時即發生。

.number

在使用 <input> 傳送響應式資料時，資料的型別會是字串，即使是使用 <input type="number"> 。
如果希望從 <input> 傳送過來的資料就是數字型別的話，就必須使用修飾符 .number ，即可直接傳送數字而非字串給響應式資料。
Vue 是透過 parseFloat() 來解析數值的，如果無法解析會返回原值(JS 中的parseFloat()無法解析會返回NaN)。

<!--如果開頭是字串即會返回字串型別-->
<!--如果是數字即會返回數值-->
<!--如果開頭是數字後面接字串，會省略字串，只返回前面的數字-->
<input type="text" v-model.number="message2" value="edit me">
<p>typeof is: {{ typeof(message2) }}</p>

trim

協助刪除輸入值前後的空格。

<!--在Codepen試驗加不加.trim結果相同，所以要透過別的編輯器試驗-->
<input type="text" v-model.trim="message3" value="edit me">

Demo:[DAY09]跟 Vue.js 認識的30天 - Vue 的資料雙向綁定

參考資料：

Vue.js - 表單輸入綁定v-model