你可以用 v-model 指令建立雙向數據綁定，在 Day2 的範例 06 - Form Input Bindings 已經使用過了。

範例回顧 Day2：

透過 v-model 可雙向綁定 input 和 vue instance 的 message。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

附上 fiddle (https://jsfiddle.net/hunterliu/hakh94ro/1/)

那v-model實際上是什麼？
其實v-model本質上是語法糖，負責監聽使用者的輸入事件並更新數據。v-model 會選擇 Vue Instance 中綁定的 data 作為初始值，而不是表單元素(form)中的 value, checked, selected。

下面主要分為「基礎用法」和「綁定 value」，為避免重複太多範例，「基礎用法」會有兩個範例分別為：Textarea、Checkbox；「綁定 value」會有兩個範例分別為：Radio、Select。

基礎用法

這部分就看看官方範例吧(偷懶)。

Textarea

綁定 Textarea 和 p tag。

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ msg }}</p>
<br>
<textarea v-model="msg" placeholder="add multiple lines"></textarea>

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue.js'
  }
})

附上 fiddle (https://jsfiddle.net/hunterliu/4L2zb9qn/2/)

Checkbox

複選綁定 checkedNames array。

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

var vm = new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})

附上 fiddle (https://jsfiddle.net/hunterliu/5n8jwpkr/)

綁定 value

文章剛開始提到的v-model會忽略表單元素(form)中的 value, checked, selected。但有時候我們的確有綁定value的需求，這時我們可以使用v-bind。

Radio

可利用 v-model 綁定 picked，且用 v-bind 綁定 value 的值分別為 one 和 two。

<input type="radio" :value="one" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" :value="two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

var vm = new Vue({
  el: '#app',
  data: {
    picked: [],
    one: 'valueOne',
    two: 'valueTwo'
  }
})

附上 fiddle (https://jsfiddle.net/hunterliu/9mt40g3p/)

Select

<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>

var vm = new Vue({
  el: '#app',
  data: {
    selected: '',
    a: 'aaa',
    b: 'bbb',
    c: 'ccc'
  }
})

附上 fiddle (https://jsfiddle.net/hunterliu/fs0ajv2q/)

參考資料

• Form Input Bindings