第五章表单控件绑定

v-model 指令可以在表单控件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
基本用法
text:

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

当用户操作文本框时，name会自动更新为用户输入的值，span的内容也会随之改变。

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: []
    }
})

当用户勾选checkbox时，checkedName的值也会变，span中显示的值随之也会发生变化。

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: []
    }
})

当用户勾选radio时，radioName的值也会变，span中显示的值随之也会发生变化。

select:

//单选
<div id="exp">
  <select v-model="selected">
    <option disabled value="">请选择</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="">请选择</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: []
  }
})

---

值绑定
有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

<input type="radio" v-model="picked"  :value="a">
new Vue({
  el: '',
  data: {
    a: 1,
    picked:''
  }
})
//用户勾选时，vm.picked === vm.a

---

v-model修饰指令
lazy
input事件改变成changs事件同步数据

<input v-model="abc" lazy>

debounce
设置最小延时，比较像JS中的定时器 setTimeout

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

number
转换字段类型 必须为数字类型

<input v-model="abc" number>