v-model 指令可以在表單控件上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。
基本用法
text:

<input type="text" v-model="name" placeholder="huangfu">
<span>{{ name }}</span>

當(dāng)用戶操作文本框時(shí)，name會(huì)自動(dòng)更新為用戶輸入的值，span的內(nèi)容也會(huì)隨之改變。

checkbox:

<div id='exp'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedName">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedName">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedName">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedName }}</span>
</div>
  new Vue({
    el: '#exp',
    data: {
      checkedName: []
    }
})

當(dāng)用戶勾選checkbox時(shí)，checkedName的值也會(huì)變，span中顯示的值隨之也會(huì)發(fā)生變化。

radio:

<div id='exp'>
    <input type="radio" id="a" value="Jack" v-model="radioName">
    <label for="a">Jack</label>
    <input type="radio" id="b" value="John" v-model="radioName">
    <label for="b">John</label>
    <input type="radio" id="c" value="Mike" v-model="radioName">
    <label for="c">Mike</label>
    <br>
    <span>Radio names: {{ radioName }}</span>
</div>
  new Vue({
    el: '#exp',
    data: {
      radioName: []
    }
})

當(dāng)用戶勾選radio時(shí)，radioName的值也會(huì)變，span中顯示的值隨之也會(huì)發(fā)生變化。

select:

//單選
<div id="exp">
  <select v-model="selected">
    <option disabled value="">請(qǐng)選擇</option>
    <option value="a" >A</option>
    <option value="B" >B</option>
    <option value="C" >C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: 'exp',
  data: {
    selected: ''
  }
})

//多選
<div id="exp">
  <select v-model="selected" multiple >
    <option disabled value="">請(qǐng)選擇</option>
    <option value="a" >A</option>
    <option value="B" >B</option>
    <option value="C" >C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: 'exp',
  data: {
    selected: []
  }
})

值綁定
有時(shí)我們可能想把值綁定到 Vue 實(shí)例的一個(gè)動(dòng)態(tài)屬性上，這時(shí)可以用 v-bind 實(shí)現(xiàn)，并且這個(gè)屬性的值可以不是字符串。

<input type="radio" v-model="picked"  :value="a">
new Vue({
  el: '',
  data: {
    a: 1,
    picked:''
  }
})
//用戶勾選時(shí)，vm.picked === vm.a

v-model修飾指令
lazy
input事件改變成changs事件同步數(shù)據(jù)

<input v-model="abc" lazy>

debounce
設(shè)置最小延時(shí)，比較像JS中的定時(shí)器 setTimeout

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

number
轉(zhuǎn)換字段類型 必須為數(shù)字類型

<input v-model="abc" number>