</script> </body> </html></pre>

惰性更新

默認情況下，v-model 會在每個 input 事件之后同步輸入的數據。你可以添加一個 lazy 特性，將其改變為在 change 事件之后才進行同步。

<!-- 在 "change" 而不是 "input" 事件觸發后進行同步 -->
<input v-model="msg" lazy>

轉換為數字

如果你希望將用戶的輸入自動轉換為數字，你可以在 v-model 所在的 input 上添加一個 number 特性。沒有試驗成功，不知道什么原因

<input v-model="age" number>

綁定表達式

當使用 v-model 在單選框和復選框時，被綁定的值可以是布爾值或字符串：

<!-- toggle 是 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當單選框被選中時 pick 是 "red" -->
<input type="radio" v-model="pick" value="red">

這里有一點小的局限性——有的時候我們想把背后的值綁定到一些別的東西上。你可以按下面這個例子實現：

1. 復選框

   <input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">

   // 被選中時：
   vm.toggle === vm.a
   // 被取消選中時：
   vm.toggle === vm.b

2. 單選框

   <input type="radio" v-model="pick" exp="a">

   // 被選中時：
   vm.pick === vm.a

動態select選項

當你需要為一個 <select> 元素動態渲染列表選項時，推薦將 options 特性和 v-model 指令配合使用，這樣當選項動態改變時，v-model 會正確地同步：

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

在你的數據里，myOptions 應該是一個指向選項數組的路徑或是表達式。
這個可選的數組可以包含簡單的數組：

options = ['a', 'b', 'c']

或者可以包含格式如 {text:'', value:''} 的對象。該對象格式允許你設置可選項，讓文本展示不同于背后的值：

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

會被渲染成為

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

1. 選項組
   另外，數組里對象的格式也可以是 {label:'', options:[...]}。這樣的數據會被渲染成為一個 <optgroup>：

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

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

2. 選項過濾
   你的原始數據很有可能不是這里所要求的格式，因此在動態生成選項時必須進行一些數據轉換。為了簡化這種轉換，options特性支持過濾器。將數據的轉換邏輯做成一個可復用的 自定義過濾器 通常來說是個好主意：

   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' }] 這樣的原始數據轉化為 ['Bruce', 'Chuck']，從而符合動態選項的格式要求。

3. 靜態默認選項
   除了動態生成的選項之外，你還可以提供一個靜態的默認選項：

   <select v-model="selectedUser" options="users">
   <option value="">Select a user...</option>
   </select>

   基于 users 動態生成的選項將會被添加到這個靜態選項后面。如果 v-model 的綁定值為除 0 之外的偽值，則會自動選中該默認選項。

輸入debounce

在一次輸入被同步到模型之前，debounce 特性允許你設置一個每次用戶事件后的等待延遲。如果在這個延遲到期之前用戶再次輸入，則不會立刻觸發更新，而是重置延遲的等待時間。當每次更新前你要執行繁重作業時會很有用，例如一個基于 ajax 的自動補全功能。有效的減少重復無用的提交

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

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