Vue 实现复选框全选功能

<template>
    <div>
        <li v-for="item in todoList">
            <input type="checkbox" v-model="item.done"> {{ item.title }}
        </li>
        <input type="checkbox" v-model="allDone"> {{ active }} / {{ all }}
    </div>
</template>

<script>
export default {
    data () {
        return {
            todoList: [
                { title: '吃饭', done: true },
                { title: '睡觉', done: false },
                { title: '学习', done: false }
            ],
        }
    },
    computed: {
        active () {
            return this.todoList.filter(v => v.done).length
        },
        all () {
            return this.todoList.length
        },
        allDone: {
            get () {
                return this.active === this.all
            },
            set (val) {
                this.todoList.forEach(v => {
                  v.done = val
                })
            }
        }
    },
}
</script>