012 vue的v-model的使用
v-model的使用
实现双向绑定，即当数据改变时，界面同步更新，当界面改变时，数据也及时更新。
[A]的基本使用
1. v-model实现表单元素和数据的双向绑定
示例：
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
在表单元素中，v-model绑定的是表单内容
2. 同理，input标签换成textarea也可以实现双向绑定
3. 双向绑定的原理：
1. 表单元素通过v-bind绑定一个value属性
2. 表单元素通过v-on绑定一个input事件，该事件用于修改对应的数据模型
[B] v-model结合radio
单选框通过v-model绑定一个变量，则被选中的单选框的value值会赋值给这个变量
示例：
<div>
<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>
<h2>你选择的性别是：{{sex}}</h2>
</div>
此外，name为同一个值的多个单选框时互斥的，但是如果v-model绑定的是同一个变量，也被认定为互斥的
[C] v-model结合checkbox
1. 单个复选框
<label for="swim">
<input type="checkbox" name="sports" id="swim" v-model="sports">游泳
</label>
<button :disabled="sports">下一步</button>
当复选框被选中时，绑定的变量sports为true，否则为false,并且选中复选框才能进行下一步操作
2. 多个复选框
<div>
<label for="swim">
<input type="checkbox" id="swim" value="swim" v-model="sports">游泳
</label>
<label for="swim">
<input type="checkbox" id="run" value="run" v-model="sports">跑步
</label>
<label for="swim">
<input type="checkbox" id="basketball" value="basketball" v-model="sports">篮球
</label>
<label for="swim">
<input type="checkbox" id="gun" value="gun" v-model="sports">枪击
</label>
<h2>你选择的是：{{sports}}</h2>
</div>
多个复选框绑定同一个变量，该变量为数组，则被选中的复选框的值value值会被保存到数组中。元素顺序和选中顺序相同
[D] v-model结合select
单选和多选的双向绑定
<select name="fruits" id="fruits" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="荔枝">荔枝</option>
<option value="橘子">橘子</option>
<option value="西瓜">西瓜</option>
<option value="芒果">芒果</option>
<option value="柚子">柚子</option>
</select>
<h2>你选择的水果是：{{fruits}}</h2>
[E] v-model的值绑定
有时候，我们需要根据一个数组，动态创建单选框，复选框和select
这个时候就需要用值绑定的方式。
<div>
<label v-for="item in city" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="selectedCity">{{item}}<br/>
</label>
<h2>你选择的城市是：{{selectedCity}}</h2>
</div>
根据city数组动态创建复选框，然后将复选框的值绑定到selectedCity数值中去。
[E] v-model的修饰符
1. .lazy
默认情况下，v-model默认是在input事件中同步输入框中的数据的，也就是数据改变，dada中的数据会立刻同步
lazy修饰符就可以使数据在市区焦点后才同步data中的数据
示例：
<div>
<label for="username">
<input type="text" id="username" v-model.lazy="ins">
</label>
{{ins}}
</div>
在输入框中输入时，不会更新ins，当输入框失去焦点时才会更新数据
2. .number
默认情况下，输入框中输入的内容都会被当做字符串处理
number修饰符可以让输入框中的内容自动转换成数值类型
<div>
<label for="username">
<input type="number" id="username" v-model.number="ins">
</label>
{{typeof ins}}
</div>
此时输入框中的数据会被自动转换成数值类型
3. trim修饰符
如果输入框中有很多空格，通过我们希望将其去除
trim修饰符可以将输入内容左右两边的空格去除
示例：
<div>
<label for="username">
<input type="text" id="username" v-model.trim="ins">
</label>
|{{ins}}|
</div>
