<div> <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"> <span>{{ toggle }}</span> </div> <script> var example = new Vue({ el: '#example', data:{ toggle:'', a:true, b:false } }) </script>
单选按钮<div> <input type="radio" v-model="pick" :value="a"> <span>{{ pick }}</span> </div> <script> var example = new Vue({ el: '#example', data:{ pick:'', a:true } }) </script>
选择列表<div> <select v-model="selected"> <option :value="{ number: 123 }">123</option> <option :value="{ number: 234 }">234</option> <option :value="{ number: 345 }">345</option> </select> <span>Selected: {{ selected.number }}</span> </div> <script> var example = new Vue({ el: '#example', data:{ selected:'' } }) </script>
修饰符 .lazy在默认情况下， v-model在input事件中同步输入框的值与数据，但可以添加一个修饰符 lazy ，从而转变为在change事件中同步
下列例子中，光标移出输入框时，才同步数据
<div> <input v-model.lazy="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div> <script> var example = new Vue({ el: '#example', data:{ message:'' } }) </script>
.number如果想自动将用户的输入值转为Number类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符number给v-model来处理输入值
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型
<div> <div> <input v-model="age1" type="number"> <span>{{type1}}</span> <p>普通输入: {{ age1 }}</p> </div> <div> <input v-model.number="age2" type="number"> <span>{{type2}}</span> <p>number修饰符输入: {{ age2 }}</p> </div> </div> <script> var example = new Vue({ el: '#example', data:{ age1:'', age2:'', }, computed:{ type1:function(){ return typeof(this.age1) }, type2:function(val){ return typeof(this.age2) }, } }) </script>
.trim如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
<div> <input v-model.trim="msg"> <p>msg is: {{ msg }}</p> </div> <script> var example = new Vue({ el: '#example', data:{ msg:'' } }) </script>