基本用法

你可以在表單的 input 元素上使用 v-model 指令來創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù) input 元素的類型自動(dòng)選取正確的綁定模式。

示例

<form id="demo">
  <!-- text -->
  <p>
    <input type="text" v-model="msg">
    {{msg}}
  </p>
  <!-- checkbox -->
  <p>
    <input type="checkbox" v-model="checked">
    {{checked ? "yes" : "no"}}
  </p>
  <!-- radio buttons -->
  <p>
    <input type="radio" name="picked" value="one" v-model="picked">
    <input type="radio" name="picked" value="two" v-model="picked">
    {{picked}}
  </p>
  <!-- select -->
  <p>
    <select v-model="selected">
      <option>one</option>
      <option>two</option>
    </select>
    {{selected}}
  </p>
  <!-- multiple select -->
  <p>
    <select v-model="multiSelect" multiple>
      <option>one</option>
      <option>two</option>
      <option>three</option>
    </select>
    {{multiSelect}}
  </p>
  <p><pre>data: {{$data | json 2}}</pre></p>
</form>

new Vue({
  el: '#demo',
  data: {
    msg      : 'hi!',
    checked  : true,
    picked   : 'one',
    selected : 'two',
    multiSelect: ['one', 'three']
  }
})

效果

http://wiki.jikexueyuan.com/project/vue-js/images/6.png" alt="" />

惰性更新

默認(rèn)情況下，v-model 會(huì)在每個(gè) input 事件之后同步輸入的數(shù)據(jù)。你可以添加一個(gè) lazy 特性，將其改變?yōu)樵?change 事件之后才進(jìn)行同步。

<!-- 在 "change" 而不是 "input" 事件觸發(fā)后進(jìn)行同步 -->
<input v-model="msg" lazy>

轉(zhuǎn)換為數(shù)字

如果你希望將用戶的輸入自動(dòng)轉(zhuǎn)換為數(shù)字，你可以在 v-model 所在的 input 上添加一個(gè) number 特性。

<input v-model="age" number>

動(dòng)態(tài) select 選項(xiàng)

當(dāng)你需要為一個(gè) <select> 元素動(dòng)態(tài)渲染列表選項(xiàng)時(shí)，推薦將 options 特性和 v-model 指令配合使用，這樣當(dāng)選項(xiàng)動(dòng)態(tài)改變時(shí)，v-model 會(huì)正確地同步：

<select v-model="selected" options="myOptions"></select>

在你的數(shù)據(jù)里，myOptions 應(yīng)該是一個(gè)指向選項(xiàng)數(shù)組的路徑或是表達(dá)式。

該數(shù)組可以包含普通字符串或?qū)ο?。?duì)象的格式應(yīng)為 {text:'', value:''}。這允許你把展示的文字和其背后對(duì)應(yīng)的值區(qū)分開來。

[
  { text: 'A', value: 'a' },
  { text: 'B', value: 'b' }
]

會(huì)渲染成：

<select>
  <option value="a">A</option>
  <option value="b">B</option>
</select>

另外，數(shù)組里對(duì)象的格式也可以是 {label:'', options:[...]}。這樣的數(shù)據(jù)會(huì)被渲染成為一個(gè) <optgroup>：

[
  { label: 'A', options: ['a', 'b']},
  { label: 'B', options: ['c', 'd']}
]

會(huì)渲染成：

<select>
  <optgroup label="A">
    <option value="a">a</option>
    <option value="b">b</option>
  </optgroup>
  <optgroup label="B">
    <option value="c">c</option>
    <option value="d">d</option>
  </optgroup>
</select>

你的原始數(shù)據(jù)很有可能不是這里所要求的格式，因此在動(dòng)態(tài)生成選項(xiàng)時(shí)必須進(jìn)行一些數(shù)據(jù)轉(zhuǎn)換。為了簡(jiǎn)化這種轉(zhuǎn)換，options 特性支持過濾器。將數(shù)據(jù)的轉(zhuǎn)換邏輯做成一個(gè)可復(fù)用的 自定義過濾器 。通常來說是個(gè)好主意：

Vue.filter('extract', function (value, keyToExtract) {
  return value.map(function (item) {
    return item[keyToExtract]
  })
})

<select
  v-model="selectedUser"
  options="users | extract 'name'">
</select>

上述過濾器將像 [{ name: 'Bruce' }, { name: 'Chuck' }] 這樣的原始數(shù)據(jù)轉(zhuǎn)化為 ['Bruce', 'Chuck']，從而符合動(dòng)態(tài)選項(xiàng)的格式要求。

輸入 Debounce

在一次輸入被同步到模型之前，debounce 特性允許你設(shè)置一個(gè)每次用戶事件后的等待延遲。如果在這個(gè)延遲到期之前用戶再次輸入，則不會(huì)立刻觸發(fā)更新，而是重置延遲的等待時(shí)間。當(dāng)每次更新前你要執(zhí)行繁重作業(yè)時(shí)會(huì)很有用，例如一個(gè)基于 ajax 的自動(dòng)補(bǔ)全功能。

<input v-model="msg" debounce="500">

結(jié)果

http://wiki.jikexueyuan.com/project/vue-js/images/7.png" alt="" />

注意 debounce 參數(shù)并不對(duì)用戶的輸入事件進(jìn)行 debounce：它只對(duì)底層數(shù)據(jù)的 “寫入” 操作起作用。因此當(dāng)使用 debounce 時(shí)，你應(yīng)該用 vm.$watch() 而不是 v-on 來響應(yīng)數(shù)據(jù)變化。

下一步：計(jì)算屬性