Vue.js实现checkbox的全选和反选

html

<template>
    <div class="hello">
        <ul>
            <li v-for="(item, index) in proData">
                <label for="">
                    <input type="checkbox" :value="item.name" v-model="selectArr">
                label>{{item.name}}
            li>
            ：
        ul>
        <button type="" @click="del">删除button>
        {{selectArr}}
        <label>
            <input type="checkbox" class="checkbox" @click="selectAll"/>全选
        label>
    div>
template>

js

<script>
    var proData = [{
        "name": "aaaaaaaaaa"
    }, {
        "name": "bbbbbbbbbb"
    }, {
        "name": "cccccccccc"
    }, {
        "name": "dddddddddd"
    }]
    export default {
        name: 'hello',
        data: function() {
            return {
                proData: proData,
                selectArr: []
            }
        },
        methods: {},
        watch: {//深度 watcher
        },
        created() {
            this.$http.get('').then(function(response) {
                response = response.body;
                this.proData = response.data;
            })
        },
        methods: {
            del() {
                var arr = [];
                var len = this.proData.length;
                for(var i = 0; i < len; i++) {
                    if(this.selectArr.indexOf(i) >= 0) {
                        console.log(this.selectArr.indexOf(i))
                    } else {
                        arr.push(proData[i])
                    }
                }
                this.proData = arr;
                this.selectArr = []
            },
            selectAll(event) {
                var _this = this;
                console.log(event.currentTarget)
                if(!event.currentTarget.checked) {
                    this.selectArr = [];
                } else { //实现全选
                    _this.selectArr = [];
                    _this.proData.forEach(function(item, i) {
                        _this.selectArr.push(item.name);
                    });
                }
            }
        }
    }
script>