• 表單輸入input雙向綁定

input輸入框的@change事件，要在 input 失去焦點(diǎn)的時(shí)候才會(huì)觸發(fā)；
在輸入框內(nèi)容變化的時(shí)候不會(huì)觸發(fā)change，當(dāng)鼠標(biāo)在其他地方點(diǎn)一下才會(huì)觸發(fā)；
@change 事件也可用于單選框與復(fù)選框改變后觸發(fā)的事件。
可以使用于：<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多選功能實(shí)現(xiàn)：

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: '語(yǔ)文'
     },
     {
         select: 'false',
         name: '數(shù)學(xué)'
     },
     {
         select: 'false',
         name: '英語(yǔ)'
     },
     ]                      
   every: false
}
methods: {
     selectAll(){
         this.arr.forEach((item)=>{
               item.select = this.every
         })
   },
   change(){
        this.every = this.arr.every((item)=>{
           return item.select
        })
     }
 }

注意：選項(xiàng)data中，要聲明checked變量，默認(rèn)值為false，checked：false，頁(yè)面操作，勾選上，那么v-model會(huì)自動(dòng)綁定更新checked變量，更新為true