vue双向绑定v-model的用法

• 表单输入input双向绑定

input输入框的@change事件，要在 input 失去焦点的时候才会触发；
在输入框内容变化的时候不会触发change，当鼠标在其他地方点一下才会触发；
@change 事件也可用于单选框与复选框改变后触发的事件。
可以使用于：<input>, <select>, 和 <textarea>。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message" type="text">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

• checkbox多选功能实现：

DOM:
<div v-for="item in arr">
     <input type="checkbox" v-model="item.select" @change="change">
     <span>{{ item.name }}</span> 
</div>
全选：<input type="checkbox" v-model="every" @change="selectAll" >

data(){
arr: [
      {
         select: 'false',
         name: '语文'
     },
     {
         select: 'false',
         name: '数学'
     },
     {
         select: 'false',
         name: '英语'
     },
     ]                      
   every: false
}
methods: {
     selectAll(){
         this.arr.forEach((item)=>{
               item.select = this.every
         })
   },
   change(){
        this.every = this.arr.every((item)=>{
           return item.select
        })
     }
 }

注意：选项data中，要声明checked变量，默认值为false，checked：false，页面操作，勾选上，那么v-model会自动绑定更新checked变量，更新为true