<input type="text" v-model="message" />
<span>Your input is : {{ message }}</span>

<label><input type="radio" value="male" v-model="gender "> 男</lable>
<label><input type="radio" value="female" v-model="gender "> 女</lable>
<p>{{ gender }}</p>

<input type="checkbox" v-model="checked" />
<span>checked : {{ checked }}</span>

<label><input type="checkbox" value="1" v-model=" multiChecked">1</lable>
<label><input type="checkbox" value="2" v-model=" multiChecked">2</lable>
<label><input type="checkbox" value="3" v-model=" multiChecked">3</lable>
<p>MultiChecked: {{ multiChecked.join('|') }}</p>

<select v-model="selected">
　 <option selected>A</option>
　 <option>B</option>
　 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

<select v-model="multiSelected" multiple>
　 <option selected>A</option>
　 <option>B</option>
　 <option>C</option>
</select>


<span>MultiSelected: {{ multiSelected.join('|') }}</span>

image.png

默认情况下，v-model 在input 事件中同步输入框值与数据，加lazy 属性后从会改到在
change 事件中同步。
<input v-model="query" lazy />
② number
会自动将用户输入转为Number 类型，如果原值转换结果为NaN 则返回原值。
<input v-model="age" number/>
③ debounce
debounce 为设置的最小延时，单位为ms，即为单位时间内仅执行一次数据更新。该参
数往往应用在高耗操作上，例如在更新时发出ajax 请求返回提示信息。
<input v-model="query" debounce="500" />
不过Vue.js 2.0 中取消了lazy 和number 作为参数，用修饰符（modifier）来代替:
<input v-model.lazy="query" />　<input v-model.numer="age" />
新增了trim 修饰符，去掉输入值首尾空格:
<input v-model.trim="name" />
去除了debounce 这个参数，原因是无法监测到输入新数据，但尚未同步到vm 实例属
性时这个状态。如果仍有需要，官方提供了手动实现的例子https://jsbin.com/zefawu/3/
edit?html,output。