vue下的checkbox控制（统计未选中个数）

要统计未选中的个数，可以通过计算属性来实现。具体实现方法如下：

<template>
  <div>
    <input type="checkbox" v-model="allChecked" @change="checkAll">
    全选
    <br>
    <input type="checkbox" v-model="checkedList" v-bind:value="1">
    选项1
    <br>
    <input type="checkbox" v-model="checkedList" v-bind:value="2">
    选项2
    <br>
    <input type="checkbox" v-model="checkedList" v-bind:value="3">
    选项3
    <br>
    已选中 {{ checkedCount }} 个，未选中 {{ uncheckedCount }} 个
  </div>
</template>

<script>
export default {
  data() {
    return {
      allChecked: false,
      checkedList: []
    }
  },
  computed: {
    checkedCount() {
      return this.checkedList.length
    },
    uncheckedCount() {
      return 3 - this.checkedCount
    }
  },
  methods: {
    checkAll(event) {
      this.checkedList = event.target.checked ? [1, 2, 3] : []
    }
  }
}
</script>

在上面的示例中，我们新增了一个计算属性 uncheckedCount，用来计算未选中的个数。在这个计算属性中，我们通过总数减去已选中的个数来得到未选中的个数。最后在模板中显示已选中和未选中的个数。