vue下的checkbox控制（全选，反选，及统计选中个数）

在 Vue 中，可以使用 v-model 指令绑定 checkbox 的选中状态。同时，可以使用计算属性来实现全选、反选及统计选中个数的功能。

下面是一个示例代码：

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll" @change="selectAllFn">
      全选
    </label>
    <label v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="item.checked" @change="selectFn">
      {{ item.name }}
    </label>
    <p>选中个数：{{ selectedCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '选项1', checked: false },
        { name: '选项2', checked: false },
        { name: '选项3', checked: false },
      ],
      selectAll: false,
    };
  },
  computed: {
    selectedCount() {
      return this.list.filter((item) => item.checked).length;
    },
  },
  methods: {
    selectAllFn() {
      this.list.forEach((item) => (item.checked = this.selectAll));
    },
    selectFn() {
      this.selectAll = this.list.every((item) => item.checked);
    },
  },
};
</script>

在上面的代码中，list 数组是要渲染的选项列表，每个选项都有一个 checked 属性表示选中状态。selectAll 变量表示全选状态。

selectAllFn 方法实现全选功能，将 list 中的所有选项的 checked 属性设置为 selectAll。selectFn 方法实现反选功能，根据 list 中所有选项的 checked 属性计算出 selectAll 的值。

selectedCount 计算属性用于统计选中的个数，它使用了 filter 方法过滤出 checked 属性为 true 的选项，并返回它们的数量。