表单绑定v-model

v-model的引入

表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-modle可以实现表单元素与数据的双向绑定

什么叫双向绑定?

在为文本框绑定v-model属性后，在文本框中输入的任意内容都会的传递给message，message随之发生改变；而手动的改变message也会同时改变文本框中的内容

<p>文本内容是：{{message}}</p>
<input type="text" v-model="message" />

data: {
    message: 'Hello'
}

v-bind实际上是一个语法糖，它的背后本质上包含了两个操作：

以上面文本框为例：
- v-bind绑定一个value属性，此时value值等于message
- v-on指令给当前元素绑定input事件，此时message等于value值

<input type="text" v-model="message">
等同于
<!-- $event.target.value：触发事件目标的值，本例中即为文本框中的value值。将value值赋给message，此时message=value，动态绑定value，此时value=message，二者之间构成一个双向绑定 -->
<input type="text" :value="message" @input="message = $event.target.value">

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

v-model：radio

<div>
    <label for="male">男</label>
    <input type="radio" id="male" value="男" v-model="sex">
</div>
<div>
    <label for="female">女</label>
    <input type="radio" id="female" value="女" v-model="sex">
</div>
<h2>您的性别是：{{sex}}</h2>

data: {
    sex: '男'
}

[radio按钮说明]：radio按钮由于默认value为空，因此须分别设置value值，由于v-model绑定的都是sex，因此两个radio按钮已经互斥，不需要再添加name值互斥

v-model：checkbox

checkbox 分为单选框和单选框

①单选框

单选框对应一个布尔值

<label for="agree">
    <input type="checkbox" id="agree" value="" v-model="isAgree" />同意协议
</label>

data: {
    isAgree: false
}

②多选框

多选框对应一个数组

<input type="checkbox" value="篮球" v-model="hobbies" />篮球
<input type="checkbox" value="足球" v-model="hobbies" />足球
<input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
<h2>选择你的爱好：{{hobbies}}</h2>

data: {
    hobbies: []
}

v-model：select

select同样也分为单选和多选

①单选

v-model绑定的是一个值。当我们选中选项中的一个时，它就会将对应的value赋值给fruit

<select name="fruits" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="梨子">梨子</option>
    <option value="荔枝">荔枝</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>

data: {
    fruit: '香蕉'
}

②多选

v-model绑定的是一个数组。当选中多个值时，就会将对应的value都添加进数组
```
// 多选极为少见，不做介绍
```

v-model修饰符

①.lazy

默认情况下，v-model是在input事件中同步输入框的数据的，也就是说，一旦数据发生改变，data中对应的数据就会同步发生改变
lazy修饰符的作用就是让数据在失去焦点或按下回车时才会更新
```
<input type="text" v-model.lazy="message" />
```

②.number

默认情况下，无论我们在输入框中输入的是字母还是数字，都会被当作字符串处理
number修饰符的作用就是让输入框中的内容自动转换为数字类型
```
<input type="number" v-model.number="message" />
```

③.trim

如果输入内容的首尾有空格，通常情况下，我们希望将去除
trim修饰符的作用就是自动去除首尾空格
```
<input type="text" v-model.trim="message" />
```

[修饰符组合使用]: 修饰符都是可以组合使用的，如<input type="number" v-model.number.lazy="message" />