v-model 雙向綁定

可以用在 form 表單的 input 欄位, textarea 欄位, 和 select 欄位。

input 欄位

直接對此 input 欄位加入 v-model 來綁定相對應的資料

---HTML---
<input type="text" v-model="text">

---JavaScript---
data: {
  text: 'Landy'
}

checkbox 欄位 - 複選

checkbox 是複選的選項，也是利用 v-model 相對應的資料
所以，checkbox 的功能，時常會綁定一個陣列資料，當你勾選該選項時， Vue 會將該選項的資料塞入綁定的陣列中。

---HTML---
<input type="checkbox" v-model="dishes" value="A">豬
<input type="checkbox" v-model="dishes" value="B">雞
<input type="checkbox" v-model="dishes" value="C">牛

---JavaScript---
data: {
  dishes: []
}

以上的範例，當你勾選 checkbox 中的任一選項，Vue 就會將該選項丟進陣列中，並且丟入選項的順序會跟你選擇的順序一樣，也就是若你先勾 B ，它就會先將B 推入陣列中，這在我們想要判斷使用者的選擇優先序是很有幫助的。

radiobox 欄位 - 單選

---HTML---
<p>
  <input type="radio" v-model="option" value="A">A
  <input type="radio" v-model="option" value="B">B
  <input type="radio" v-model="option" value="C">C
</p>

---JavaScript---
data: {
  option: 'A' 
}

selected 欄位

---HTML---
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<span>Selected: {{ selected }}</span>

---JavaScript---
data: {
  selected: ""
}

以上這個範例中，我們在第一個選項加入了 disabled 的屬性，在一開始，selected 欄位的初始值就是這個 Please select one 的選項，但是，當你選擇其他選項之後，這個 Please select one 的選項就不能再被選擇了喔。

lazy 修飾符

當有某個元素會高頻地被觸發時，你就可以對該元素使用 lazy 的修飾符。那 lazy 可以用在以下的情境，當使用者輸入他的帳號之後，我們會監聽這個輸入欄位的內容，並在使用者輸入完之後，並且焦點離開該輸入欄位之後，打一個 API 到後端去，檢驗是否該帳號已經被註冊過了。

當我們在第一個 input 欄位中，輸入完資料後，焦點離開此 input 欄位，才會觸發相對應的事件，這就是 lazy 修飾符的功用。

Alex 宅幹嘛 - 眉眉角角

input 欄位輸入法的雷

在 input 欄位中，若輸入中文時，當使用者完成選字後，會按下 enter 鍵，此時會有一個問題。如果你為這個表單所寫的觸發發送表單事件的按鈕也是 enter 事件的時候，就會導致使用者在選完字後按下 enter 鍵，直接連帶將此表單也送出去。
所以，當使用者在輸入時，應該要用 input 事件來監聽才對，若使用者在輸入完成內容後，按下 enter 按鍵，此時，不應該會觸發發送表單的功能。

Form 的 value 預設都是字串型別

像是 Form 表中的 radiobox 的 value 的值，預設是字串型別。所以，若你很在意form 表出來的資料的型別的話，記得為綁定這些資料的 v-model 再加上轉型的修飾符。
ex:

---HTML---
<div>
  <input type="radio" value="0" v-model.number="gender">女
  <input type="radio" value="1" v-model.number="gender">男
</div>

---JavaScript---
data: {
  gender: 0
}

以上的範例，若你沒有在 v-model 後面加上 number 的修飾符的話，在你點選 radiobox 的選項時，該 value 的資料，會自動被轉型成字串型別，就算你綁定資料的初始型別是數字型別。
以上這種情境要注意一下~

selected 選單要不要用 disabled

當你的表單是必填時，建議你對預設選項使用 disabled ，因為，當使用者選了其中一個選項之後，那個原本有加入 disabled 的選項，就不能再被選擇了。
若你的表單是選填，就不建議你對表單中的選項使用 disabled。

div 區塊元素，可以觸發 blur 事件

對 div 區塊搭配 tabindex 屬性，就可以透過 tab 鍵來選取到該 div 區塊，並在該 div 失去焦點後，就會觸發 blur 事件了。

Landy Blog

Vue-v-model雙向綁定