v-model 只用在表单控件身上，会根据控件类型自动选取正确的方法来更新元素。

双向数据绑定

说起v-model就必须先了解双向数据绑定，然而这个概念又不是几句能说清的，这里只说实现效果是怎样的：

Vue实例的data变化，会影响表单控件的值；
反之，表单控件的值，会影响Vue实例的data。

用在输入控件上的基本用法

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

用在复选框上的基本用法

data有一个布尔值子对象，将这个子对象传递给<input type="checkbox">控件。结果会改变控件的勾选状态。控件自己勾选状态的变化，又会影响布尔值。这就是基本用法。

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false
  }
})
</script>

用在复选框上的进阶用法

跟基本用法不同，这次将空数组传递给控件，这时Vue会认为你希望将控件的value传递给控件，那么，如果value匹配，则勾选，不匹配的则不勾选。

如果想让某个控件默认勾选，则数组中加入该控件的value即可。比如["google"]。

另外从例子中可以看到，如果你想打印数组，Vue会把数组变成字面量，然后以字符串形式打印。

<div id="app">
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})
</script>

用在单选框上的用法

由于单选框只会有一个控件处于勾选状态，所以只需要传入一个字符串即可，这个字符串需要跟控件的value一致。如果传空串，则默认不勾选任何控件。

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

用在select上的用法

select在百分之九十九的情况下是单选模式，所以传入空串或者一个字符串即可，跟单选框类似。

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

修饰符

.lazy

因为在默认情况下， v-model 利用的是 input 事件来同步输入框的值与数据，如果你希望得到的是控件失去焦点的时候才触发动作（失去焦点之前不想触发动作），那你其实想要的是change事件，这时候，你可以添加一个修饰符 lazy，这样Vue不再监听input事件，改为监听change事件，这在某些场合有用：

<div id="app">
  <p>input 元素：</p>
  <input v-model.lazy="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model.lazy="message2" placeholder="多行文本输入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值。这用于前端过滤用户输入。

比如我们希望用户输入电话号码，当用户打算输入132-7311-5000，就只会输入132，这会迫使用户输入正确的数字。

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

.trim

过滤用户输入的前后无用字符，不多解释。

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