vue中choxkbox全选

在 Vue 中实现全选功能，需要先在 data 中定义一个变量，表示是否全选。然后在全选的 checkbox 中绑定一个 v-model，将其值与 data 中的变量绑定。接着，在每个子 checkbox 中绑定一个 v-model，将其值与子 checkbox 对应的数据绑定。最后，在全选的 checkbox 的 change 事件中，将 data 中的变量值改为与全选 checkbox 绑定的值相同即可实现全选功能。

下面是一个示例代码：

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

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

在这个示例中，我们定义了一个 selectAll 变量表示是否全选，以及一个 list 数组表示子选项。在全选 checkbox 中，我们绑定了一个 v-model，将其值与 selectAll 变量绑定。在每个子 checkbox 中，我们同样绑定了一个 v-model，将其值与对应的数据的 checked 属性绑定。最后，在全选 checkbox 的 change 事件中，我们遍历 list 数组，将每个子 checkbox 的 checked 属性与 selectAll 变量保持一致。这样，就可以实现全选功能了。