這篇是 資料綁定(data-binding) 的補充，將我們常用的輸入介面與Vue的資料綁在一起。

若是漏了前面章節，可以回去翻翻

• Vue.js 05 - 資料綁定(data binding) 與 樣板(template) 語法

常用的表單元素有

• 文字輸入欄

<input type="text" v-model="message" placeholder="edit here">
{{ message }}

<textarea v-model="note" placeholder="edit here"></textarea>
{{ message }}

• 下拉選單

<select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

• 單選

<input type="radio" id="developer" value="developer v-model="role">
<label for="developer">{{ developer }}</label>
<input type="radio" id="manager" value="manager" v-model="role">
<label for="manager">{{ manager }}</label>
<input type="radio" id="designer" value="designer" v-model="role">
<label for="designer">{{ designer }}</label>

<span>職稱: {{ role }}</span>```

- 多選

沒指定時，對應 `checked` 屬性的 `true/false`

有指定 value 時，選取時會取得 字串，例如 'gaming'

<input type="checkbox" id="gaming" value="gaming" v-model="habits">
<label for="gaming">{{ gaming }}</label>
<input type="checkbox" id="coding" value="coding" v-model="habits">
<label for="coding">{{ coding }}</label>
<input type="checkbox" id="hiking" value="hiking" v-model="habits">
<label for="hiking">{{ hiking }}</label>

<span>興趣: {{ habits }}</span>

有時你想要數值，而不是字串。
有時你想要防止使用者用空白充數。
有時你想要使用者打完字才更新資料。

就像事件處理給你方便，v-model也給你方便修飾子，

<input text="number" v-model.number>
<input text="text" v-model.trim>
<input text="text" v-model.lazy>

有時不選，也是一種選擇，只是跟預設答案不同。
有時候題目一樣，但答案應狀況而定，不是定值。

綁定特定屬性 v-bind:attr，能小巧而靈活地克服這些問題

	data: {
		isMoeMoe: false, /* 萌萌嗎 */
		a: 'Yes'
	},
	computed: {
		b: function() {
			return (isMoeMoe) ? 'Yes' : 'No';
		}
	}

萌萌嗎？<input type="checkbox" v-model="isMoeMoe">
<p>只要雙方同意，就讓他們在一起吧</p>
<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b">

搭配陣列更是威力百倍

	data: {
		swords: [
			'老媽的鹹魚',
			'尚方寶劍',
			'清朝的刀'
		]
	}

<p>常威喜歡哪一把</p>
<select v-model="selected">
	<opttion>老大別砍我</option>
	<opttion v-for="sword in swords" :value="sword"></option>
</select>

	data: {
		options: ['gaming', 'coding', 'hiking', 'alwayEat', 'alwaysSleep']
	}

<template v-for="habit in options">
<input type="checkbox"
       id="{{ habit }}"
       :value="habit"
       v-model="habits">
<label for="{{ habit }}">{{ habit }}</label>
</template>

<span>興趣: {{ habits }}</span>

還算容易吧？
往後將會談到進階的綜合應用，等我們介紹完Component，就來處理來自客戶/設計師/老闆的的特別需求 - 自製表單元件。