vue实现全选、全不选和部分选择功能

 <div id="box">
        全选/全不选 <input type="checkbox" v-model="select">
        <ul>
            <li v-for="(item,index) in list" :key="item.id" >
                <input type="checkbox" v-model="item.flag">
                {{item.name}}
            </li>
        </ul>
    </div>

下文中Date.now()+数字，是为了key值得唯一性，相同的key值会报警告

<script>
       var vm = new Vue({
            el: "#box",
            computed: {  //计量属性
                select: {
                    // 显示修改后的数据
                    get() { 
                        return this.list.every((item)=>item.flag)
                    },
                    // 修改数据  传参  
                    set(v) {
                       this.list.forEach((item)=>item.flag=v)
                    },
                },
                fn(){
                    return this.list.forEach((item)=>!item.flag)
                }
            },
            data: {
                list: [
                    {
                        id: Date.now(),
                        name: "alex",
                        flag: true
                    },
                    {
                        id: Date.now()+1,
                        name: "nancy",
                        flag: false
                    },
                    {
                        id: Date.now()+2,
                        name: "sophia",
                        flag: false
                    },
                ]
            }
        })
    </script>