手敲版干货！三分钟学会vue中v-model绑定表单事件（单选、多选、下拉选）~

1.关于v-model
v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

2.v-model 在不同的元素使用不同的 property 并抛出不同的事件

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

3.文本
v-model绑定的是data里的message属性↓

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

4.多行文本域

<textarea v-model="message" placeholder="add multiple lines"></textarea>

5.单选按钮

 <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>

tip:1.label for的值和id值相等，才会有匹配效果
2.单选按钮的v-model绑定空字符串
3.当v-model与value相等，就会选中

 data: {picked: ''}

6.单个复选框
绑定v-model到布尔值，ture为选中,false为不选中

<input type="checkbox" id="checkbox" v-model="checked">

 data: {checked:false}

7.多个复选框
绑定v-model必须为数组，否则点击单一checkbox，都会全部选中

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>

data: {checkedNames: []}

若要选中单个或多个checkbox，只要v-model绑定数组中有此value即可

8.select选择框
绑定v-model为空字符串，选中option会自动加到空字符串中(ABC)

 <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>

 data: {selected: ''}

9.vue全选和反全选demo
HTML部分

<input type="checkbox" id="checkbox" v-model="checked" @click='checkAll()'>
<label for="checkbox">全选</label>
     
<label :for="item.id" v-for='(item,i) in list '>
<input type="checkbox" :id='item.id' :value='item' v-model='arr'>{{item.value}}
</label>

JS部分

 new Vue({
 el: '#app',
watch: {
arr: {
handler: function (val, oldVal) {
if (this.arr.length == this.list.length) {
this.checked = true;}
else {this.checked = false;}},
deep: true}},
data() {
return {
 checked: false,
 list: [{
id: '1',
value: '苹果'
}, {
 id: '2',
value: '荔枝'
}, {
id: '3',
 value: '香蕉'
}],
 arr: []
}},
methods: {
 checkAll() {
// 点下去之前是true还是false
if (this.checked) this.arr = []
else {
this.arr = [],
this.list.forEach(r => {
this.arr.push(r)
})}}},})

思路：1.全选按钮为单个checkbox，v-model绑定data的checked值，为true选中
2.点击全选按钮，添加click事件，判断此时checked的值，若为选中true，
将子checkbox的v-model绑定的arr数组添加v-for的list数组，这样子类checkbox全部选中，false将arr数组置为空即可
3.当点击单个子类checkbox时，会自动将value值加入arr。所以用深度watch监听arr.length和list.length，相等后将checked值变成true
4.tip：此demo不适合监听checked的值，如果设置watch checked再push后，当点选子类checkbox后，checked会变成true，会再次push整个list。