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上了