vue實現全選效果

vue實現全選效果

   接觸vue快半年了，記得剛用vue做項目的時候遇到一個全選功能，當時到處百度也沒有找到怎么實現，最后還是用了jquery進行dom操作實現的。
今天沒事就順手寫了一個，感覺很簡單，js代碼也就十幾行就實現了，廢話不多說亮代碼。

```
  html
    <div id='app' class='container'>
    <input type="checkbox" name="" id="allId" v-model="allData.parCheck" @change="allSelect()">
    <label for="allId">{{allData.text}}</label> {{allData.parCheck}}
    <ul>
        <li v-for="item in checkData">
            <input type="checkbox" name="" @change="singleSelect()" v-model="item.isCheck" :id="item.id">
            <label :for="item.id">{{item.value}}</label> {{item.isCheck}}
        </li>
    </ul>
   </div>

    js
 var app = new Vue({
    el: '#app',
    data: {
    allData: {
        parCheck: false,
        text: '全選'
    },
    checkData: [{
        id: '1',
        value: '香蕉',
        isCheck: false
    }, {
        id: '2',
        value: '蘋果',
        isCheck: false
    }, {
        id: '3',
        value: '梨子',
        isCheck: false
    }, {
        id: '4',
        value: '菠蘿',
        isCheck: false
    }, {
        id: '5',
        value: '西瓜',
        isCheck: false
    }]
 },
 methods: {
    allSelect() {
        var vm = this;
        vm.checkData.forEach(item => {
            item.isCheck = vm.allData.parCheck
        })
    },
    singleSelect() {
        var vm = this;
        var selectData = vm.checkData.filter(item => {
            return item.isCheck == true
        })

        selectData.length == vm.checkData.length ? vm.allData.parCheck = true : vm.allData.parCheck = false;
    }
 }
})

注：在此遇到一個坑vue2里面現在已經不允許將選擇器綁定到html或body上了