[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'
}
```