为什么你会这么使用vue？你不应该去操作dom而应该去操作数据。你应该去修改数据里的选中状态而不是去手动的修改dom的实际选中状态。

给每个item一个isChecked的布尔值来表示当前选项是否被选中，checkAll去操作数据的这个属性就可以了。

每一行都设置v-bind:class="{'active': isChecked}",全选时再去循环每行的isChecked设置成true

最近的项目需要用到全选，写了一个全选的指令，你可以参考下

export default {
'check-all': {
twoWay: true,
        params: ['checkData'],
        bind() {
/**
             * 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框
             */
            this.vm.$watch(this.params.checkData, (checkData) => {
if (checkData.every((item) => item.checked)) {
this.set(true);
                } else {
this.set(false);
                }
            }, { deep: true });
        },
        update(checkAll) {
/**
             * 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false
             */
            if (checkAll) {
this.vm[this.params.checkData].forEach((item) => {
                    item.checked = true;
                });
            } else {
this.vm[this.params.checkData].forEach((item) => {
                    item.checked = false;
                });
            }
        },
    },
};

调用

<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData">
<ul>
    <li v-for="item in checkData">
        <input type="checkbox" v-model="item.checked">
        {{item.text}}
</li>
</ul>

知乎上也有类似的问题，也有其他解决方案，你可以参考下：
https://www.zhihu.com/questio...