# 表單與v-model
>[success] 可在此處查看運行文檔中的代碼示例結果：[https://github.com/jianyaoo/Vue](https://github.com/jianyaoo/Vue)
[toc]
## 基本用法
>[info] 在使用表單元素時，使用`v-model`指令來對數據進行雙向綁定，vue會根據控件的類型對數據自動進行處理
**<span style="padding-top:15px;display:inline-block;">input和textarea文本域</span>**
input表單通過`v-model`指令綁定數據，在input中輸入數據后實時更新綁定的數據。textarea同理
~~~html
<input type="text" v-model="message" value="5">
<div>輸入的數據為:{{message}}</div>
<textarea name="text" id="text" cols="30" rows="10" v-model="textareaMeaage"></textarea>
<div>文本域輸入的數據為：{{textareaMeaage}}</div>
~~~
<div style="background:#333;color:#fff;padding:15px;">
運行結果：在輸入框/文本域內輸入的值會實時顯示在下方。
</div>
**<span style="padding-top:30px;display:inline-block;">單選框</span>**
~~~
<h5>單選框</h5>
<div>
<labe1>性別：</labe1>
<input type="radio" value="男" v-model="sex">
<input type="radio" value="女" v-model="sex">
<input type="radio" value="未知" v-model="sex">
<p>當前選中的性別為：{{sex}}</p>
</div>
~~~
```
data:{
sex:""
}
```
<div style="background:#333;color:#fff;padding:15px;">
運行結果：點擊單選框選中后，`v-model`指令綁定的值變為選中的單選框的value值
</div>
**<span style="padding-top:30px;display:inline-block;">復選框</span>**
~~~
<h5>復選框</h5>
<div>
<label>愛好：</label>
<input type="checkbox" value="游泳" v-model="hobby">游泳
<input type="checkbox" value="健身" v-model="hobby">健身
<input type="checkbox" value="讀書" v-model="hobby">讀書
<input type="checkbox" value="打游戲" v-model="hobby">打游戲
<p>當前選中的愛好為：{{hobby}}</p>
</div>
~~~
```
data:{
hobby:[]; // 注意：數據定義為數組
}
```
<div style="background:#333;color:#fff;padding:15px;">
運行結果：選后復選框后，在綁定的數組中添加對應的value值。注意：復選框的v-model指令綁定的數據是一個數組
</div>
**<span style="padding-top:30px;display:inline-block;">v-model配合c-for指令的使用</span>**
~~~
<h5>多選列表配合v-for指令</h5>
<div>
<lable>職位：</lable>
<select name="" id="" v-model="jobs">
<option v-for="item in items" :value="item.value">{{item.text}}</option>
</select>
<p>當前選中的職位為：{{ jobs }}</p>
</div>
~~~
>[danger] 注意：如果使用`v-model`指令，則控件中的默認屬性都會失效，例如value、checked、selected等，控件的值和狀態只和`v-model`指令綁定的數據有關。
## 綁定值
>[info] 控件的值綁定作用是動態的為控件添加value值，此時需要配合v-bind指令使用。
>
**<span style="padding-top:15px;display:inline-block;">單選框</span>**
~~~
<h5>單選框</h5>
<div>
<label for="">開啟：</label>
<input type="radio" v-model="on" :value="onValue">
<p>當前是否開啟：{{ onValue }}：{{ on }}</p>
</div>
~~~
<div style="background:#333;color:#fff;padding:15px;">
運行結果：選中單選框后，vm.on === vm.onValue 為true；
</div>
**<span style="padding-top:30px;display:inline-block;">復選框</span>**
~~~
<h5>復選框</h5>
<div>
<label for="">復選框：</label>
<input type="checkbox" v-model="toggle" true-value="value1" false-value="value2">
<p>{{ toggle }}：{{ value1 }}:{{value2}}</p>
</div>
~~~
```
data:{
toggle:false,
value1:"value1",
value2:"value2",
}
```
<div style="background:#333;color:#fff;padding:30px;">
運行結果：復選框的選中狀態時 vm.togger === vm.value1為true.未選中狀態時：vm.togger === vm.value2為true;
</div>
>[danger] 這里的`true-value`和`false-value`特性并不會影響輸入控件的`value`特性，因為瀏覽器在提交表單時并不會包含未被選中的復選框。如果要確保表單中這兩個值中的一個能夠被提交，(比如“yes”或“no”)，請換用單選按鈕。
**<span style="padding-top:30px;display:inline-block;">選擇列表</span>**
~~~
<h5>選擇列表</h5>
<div>
<label for="">選擇列表</label>
<select name="" id="" v-model="selected">
<option :value="selectedValue">{{selectedValue}}</option>
</select>
<p>{{ selected }}：{{ selectedValue }}</p>
</div>
~~~
<div style="background:#333;color:#fff;padding:15px;">
運行結果：選中該選項后 vm.selected === selectedValue為true。
</div>
## 修飾符
常用的修飾符有：
* `.lazy`
* `.number`
* `.trim`
**<span style="padding-top:15px;display:inline-block;">.lazy</span>**
>[info] 控件綁定的數據默認觸發修改的方式為`change`，即文本域的值發生改變后所綁定的數據立即改變。`lazy`修飾符的作用就是修改觸發方式為`input`，即控件失去焦點后才觸發。
~~~
<h1>修飾符</h1>
<input type="text" v-model.lazy="message">
<p>輸入的數據為：{{message}}</p>
~~~
<div style="background:#333;color:#fff;padding:15px;">
運行結果：當不添加.lazy修飾符時，當文本域的值發生改變后p標簽內的值就會立即發生改變。添加.lazy修飾符后，只有文本域失去焦點后才會修改p標簽內的值。
</div>
**<span style="padding-top:30px;display:inline-block;">.number</span>**
>[info] 獲取到文本域的值時默認為string類型，即使文本域的類型為number類型。所以`number`修飾符的作用是將獲取到值強制轉換為數值類型
~~~
<input type="number" v-model.number="message1">
<p>輸入的數據為：{{message1+1}}</p>
~~~
<div style="background:#333;color:#fff;padding:15px;">
運行結果：當不添加.number修飾符時，獲取到的值作為字符串進行拼接，即輸入1時，p標簽內顯示的為11。添加修飾符后顯示為2
</div>
**<span style="padding-top:30px;display:inline-block;">.trim</span>**
>[info] `trim`修飾符的作用就是自動取消文本域中前面和后面的空白。
