使用 Vue 做全选操作

<div id="app">
    全选：<input type="checkbox" v-model="chooseAll" /> <br />
<div>
    // 利用v-for循环渲染多选框，绑定v-model
    <input v-for="item in arr" type="checkbox" v-model="item.checked" />
</div>
</div>
<script>
    new Vue({
        data:{
            arr:[{checked:false},{checked:false}]
        },
        // 我们要用到计算属性的高级用法
        computed:{
            chooseAll:{ // 全选的名称
                get(){ // 获取值
                    // 数组方法 every：当数组中的每一个元素都返回true的时候，就会返回true；只要有一个元素不是true，就会返回false
                    return this.arr.every(item=>item.checked)
                },
                set(newValue){ // 设置值
                    // newValue 就是早v-mode中绑定chooseAll名，input的状态
                    // 对这个数组进行渲染，让这个数组每一个元素的checked属性和全选按钮的状态保持一致
                    this.arr.forEach(item=>item.checked = newValue)
                }
            }
        }
    })
</script>