vue实现全选选中后个数

可以通过监听全选框的变化，然后遍历所有子复选框，统计选中的个数。具体实现可以参考下面的代码：

HTML部分：

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="selectChange"> 全选
    <br>
    <label v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked" @change="itemChange"> {{ item.name }}
    </label>
    <p>已选中 {{ selectedCount }} 个</p>
  </div>
</template>

JS部分：

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

在这个示例中，我们使用了一个 `selectAll` 变量来表示全选框是否选中，使用 `items` 数组来表示所有子复选框的状态，其中每个元素都有一个 `checked` 属性表示是否选中。然后，在 `selectChange` 和 `itemChange` 方法中，我们分别监听全选框和子复选框的变化，更新相应的状态。最后，我们使用一个 `selectedCount` 计算属性来统计选中的个数，并将其展示在页面上。