1-6-1 计算属性的应用

<div id="app">
        <div v-for="item of arr">
            <input type="checkbox"
             v-model="item.isState">{{item.name}}
        </div>
        全选/反选  <input type="checkbox"
        v-model="sum">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               arr:[
                   {name:"html",isState:false},
                   {name:"css",isState:false},
                   {name:"js",isState:false}
               ]
            },
            computed:{
                sum(){
                    return this.arr.every(item=>item.isState);
                }
            }
        })
    </script>

切换全选checkbox会报错。

<div id="app">
        <div v-for="item of arr">
            <input type="checkbox"
             v-model="item.isState">{{item.name}}
        </div>
        全选/反选  <input type="checkbox"
        v-model="sum">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               arr:[
                   {name:"html",isState:false},
                   {name:"css",isState:false},
                   {name:"js",isState:false}
               ],
            },
            computed:{
                sum:{
                    get(){
                        return this.arr.every(item=>item.isState)
                    },
                    set(val){
                        this.arr.forEach(item=>{
                            item.isState = val
                        })
                    }
                }
            }
        })