功能需求：点击全选，选中所有复选框，选中之后，如果取消某一个复选框，全选状态自动取消。

1.全选按钮：实现思路，点击全选按钮，遍历所有列表复选框，吧全选按钮的状态（true|false）赋值给每一个列表复选框

代码如下：

<p class="qx">全选<input type="checkbox" @click="selectable" v-model="seall"></p>

<script>
export default {
    data() {
        return {
            seall: false,

        }
    },
}
</script>

点击事件

        selectable() {
            for (let key of this.list) {
                key.sel = !this.seall
            }
        },

2.功能需求二：全选之后如果取消列表某一个子选项全选状态自动取消，思路：给列表的复选框添加监听事件，然后遍历所有复选框，用every 如果都为真就返回true，有一个为假就返回false，在吧这个返回值赋给全选按钮。

代码如下

    watch: {
        list: {
            handler(val) {
                this.seall = val.every(v => v.sel === true);
            },
            deep: true
        }
    },

list是存储数据的数组，，控制复选框的是sel 通过true和false来控制复选框是否启用，结构如下：

list: [{name:"",img:"",price:"",num:"",sel:false}]

代码解释如下：

1. val 是 list 数组当前的值，也就是变化后的值
2. val.every(v => v.sel === true) 表示遍历 val 数组，对于数组中的每一个元素 v，都要判断其 sel 属性是否为 true
3. 如果 val 数组中每一个元素的 sel 属性都为 true，则返回的结果为 true，否则返回的结果为 false
4. 如果 val 中的所有元素的 sel 属性都为 true，则 this.seall 被赋值为 true，否则赋值为 false

今天写vue项目遇到需要判断所有input框是否都填写了内容，用到了一个every具体如下：

判断每一个input是否都填写了内容

<input :type="v.type" :placeholder="v.ts" v-model="v.md" />

   title: [
                { name: '姓名', ts: '请输入姓名', md: '', type: 'text' },
                { name: '年龄', ts: '请输入年龄', md: '', type: 'number' },
                { name: '性别', ts: '请输入性别', md: '', type: 'text' },
                { name: '手机', ts: '请输入手机号', md: '', type: 'text' },
            ]

  is() {
            return this.title.every(v => v.md !== '');//判断所有input是否都填写完成，都不=空返回true，一个为空返回false
        }

再通过判断的返回值进行一个操作，

        add() {
            if (this.is) {
                this.list.push(this.title.map(v => v.md));
                // 提交之后清空input内容
                this.title.forEach(v => v.md = '');
            } else {
                alert('请填写所有信息');
            }
        },