我是怎么学会vue的13：v-model 表单数据双向绑定

什么是双向绑定？
data里是什么，input就显示什么，修改input里的数据，会同步修改data里面对应的数据。

1.v-model结合type类型使用

<div id="app">
  <input type="text" v-model="message">
</div>

input的数据，和data里面的message，是双向绑定了的。

2.v-model结合radio类型使用

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
</div>

此时，data的sex属性里面，即存储了sex的值。

radio单选框如何实现单选（排它），有2种方法：

1. 多个radio添加相同name属性name='sex'
2. 多个radio添加相同v-model属性v-model='sex'

3.v-model结合checkbox类型使用

checkbox可以用作单选框，也可以用作多选框。

3.1 checkbox用作单选框

checkbox用作单选框，一般用于“用户协议”的勾选，用户选上了之后可以取消勾选（使用单选框的话，用户选中了就没法取消了）。

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

数据：data里存的isAgree是布尔值，true为勾选，false为不勾选。

3.2 checkbox用作多选框

<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">羽毛球

数据：在data里面新建一个数组hobbies，会自动存放这些数据的value值。

4.v-model结合select类型使用（不常用）

4.1 单选

<select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
</select>

数据：

data: {
    fruit: '香蕉'  //设置了一个默认值，如果不设置次数留空
}

4.2 多选（添加上multiple属性）（使用Ctrl选择多个）

<select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
</select>

数据：

data: {
     fruits: []
}

5.input值的绑定

有时表单要显示什么，以及表单元素的value值，不是写死的，而是根据服务器传的数据动态显示的，此时就需要给input绑定值。

举例：这段代码的数据是写死的，但是实际开发中，要显示什么，要根据服务器传入的数据决定，所以这里就需要动态显示。

<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">羽毛球

动态显示的版本（id也可以动态绑定）：

<label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>

数据：

data: {
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}

6.v-model的修饰符

6.1 lazy 懒加载

懒加载可以实现“用到的时候才加载”的效果。

用途：v-model是双向绑定的，比如input，我输入一个字符，马上就会同步到data中。但这样的更新频率太高了，我希望在用户输入完，敲击回车或者input失去焦点，再把用户输入的数据同步到data。

<input type="text" v-model.lazy="message">

6.2 number 限制只能输入数字

<input type="number" v-model.number="age">

如果不加.number，即使用户输入的是数字，vue在data里存的数据类型也会是字符串。加上之后，data里存的数据类型就是 number 了。

6.3 trim 去掉字符串两边的空格

<input type="text" v-model.trim="name">