vue v-model

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