*****
## 表單輸入綁定
v-model指定可以實現表單值與屬性的雙向綁定。即表單元素中更改了值會自動的更新屬性中的值，屬性中的值更新了會自動更新表單中的值。
綁定的屬性和事件：
v-model在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：
1. text和textarea元素使用value屬性和input事件。
2. checkbox和radio使用checked屬性和change事件。
3. select字段將value作為prop并將change作為事件。
### 表單元素綁定
input綁定
```
v-model是v-model:value的縮寫,改變 input標簽中的值 可以改變下面的屬性
<input v-model="message" placeholder="請輸入...">
<input v-model:value="message" placeholder="請輸入...">
<p>輸入的內容是：{{ message }}</p>
new Vue({
el: '#example-3',
data: {
message: ""
}
})
```
textarea綁定
```
<span>輸入的內容是：</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="請輸入多行內容..."></textarea>
```
checkbox綁定
```
<div id='example-3'>
<input type="checkbox" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
```
radio綁定
```
<div id="example-4">
<input type="radio" value="男" v-model="gender">
<label>男</label>
<br>
<input type="radio" value="女" v-model="gender">
<label>女</label>
<br>
<span>Picked: {{ gender }}</span>
</div>
new Vue({
el: '#example-4',
data: {
gender: ''
}
})
```
select綁定
```
<div id="example-5">
<select v-model="selected">
<option disabled value="">請選擇</option>
# 如果有value值 選擇的就是value值
<option value="1">A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
```
### 修飾符
.lazy
在默認情況下，v-model在每次input事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加lazy修飾符，從而轉變為使用change事件進行同步：
```
<!-- 在"change"時而非"input"時更新 光標移除input輸入框的時候 -->
<input type="text" v-model:value.lazy="message">
<input v-model.lazy="message" >
new Vue({
el: '#app',
data: {
message: ''
}
})
```
.number
如果想自動將用戶的輸入值轉為數值類型，可以給v-model添加number修飾符
```
<input v-model.number="age" type="number">
```
這通常很有用，因為即使在type="number"時，HTML輸入元素的值也總會返回字符串。如果這個值無法被parseFloat()解析，則會返回原始的值。
.trim
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符
```
<input v-model.trim="msg">
```
