Vue值绑定

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

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

<div id="app">
  <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"/>
  {{toggle}}
  <input type="radio" v-model="pick" v-bind:value="a"/>
  {{pick}}
   <select v-model="selected">
      <option v-bind:value="{ number: 123 }">123</option>
  </select>
  {{selected}}
</div>
<script>
   new Vue({
    el:'#app',
    data:{
        toggle:'',
        pick:'',
        a:'aa',
        selected:null
    }

    });
</script>

在页面选择的时候，显示如下：

.lazy修饰符的使用，让change事件生效

<div id="app">
  <h2>lazy修饰符,让change事件进行同步</h2>
  <input type="text" v-model.lazy="msg"/>
  {{msg}}
</div>
<script>
new Vue({
    el:'#app',
    data:{
        msg:'huangbaokang'
    }

});
</script>

.number修饰符

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim修饰符

<input v-model.trim="msg">

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：