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