[TOC]
# 用法:
* 它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
## 限制:
* 一般只能在这三种情况下使用
```
<input>
<select>
<textarea>
components
```
在表单控件或者组件上创建双向绑定。
# 修饰符:
## .lazy - 取代 input 监听 change 事件
## .number - 输入字符串转为有效的数字
## .trim - 输入首尾空格过滤
# 1. 修饰符展示
```
<div id="test">
<input type="text" v-model="name">
<pre>{{name}}</pre>
<!--
v-model.lazy //
取代 input 监听 change 事件 即不会实时更新
v-model.trim //输入首尾空格过滤
-->
</div>
<script>
var app = new Vue({
el:"#test",
data:{
name:'whh',
}
})
</script>
```
# 2. input
> 传统的单选按钮
```
<label >
男
<!-- for一般填input里的id 现在直接包着可以不用填-->
<input type="radio" value="male" name="sex" >
</label>
<label >
女
<input type="radio" value="female" name="sex" >
</label>
```
> v-model 的
```
<label >
男
<input type="radio" value="male" v-model="sex" >
</label>
<label >
女
<input type="radio" value="female" v-model="sex" >
</label>
data:{
sex:'female'
}
```