用vue写一个全选和反选

好的，以下是使用 Vue 实现全选和反选的示例代码：

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="selectAllFn"> 全选
    <br>
    <label v-for="item in itemList" :key="item.id">
      <input type="checkbox" v-model="item.checked" @change="selectOneFn"> {{ item.name }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false },
        { id: 3, name: '选项3', checked: false },
        { id: 4, name: '选项4', checked: false }
      ],
      selectAll: false
    }
  },
  methods: {
    selectAllFn() {
      this.itemList.forEach(item => {
        item.checked = this.selectAll
      })
    },
    selectOneFn() {
      const checkedNum = this.itemList.filter(item => item.checked).length
      this.selectAll = checkedNum === this.itemList.length
    }
  }
}
</script>

在上面的代码中，我们在 `data` 中定义了一个 `itemList` 数组，其中包含了多个选项，每个选项都有一个 `checked` 属性表示是否被选中。还定义了一个 `selectAll` 变量表示是否全选。

在模板中，我们首先渲染了一个“全选”复选框，当它被选中时，会调用 `selectAllFn` 方法将 `itemList` 数组中的所有选项的 `checked` 属性都设置为 `true`。然后使用 `v-for` 渲染了多个选项，每个选项都有一个复选框，当它被选中时，会调用 `selectOneFn` 方法。在 `selectOneFn` 方法中，我们使用 `filter` 方法过滤出已经被选中的选项，然后判断它们的数量是否等于 `itemList` 数组的长度，如果是，则表示所有选项都被选中，此时将 `selectAll` 设为 `true`，否则设为 `false`。

这样就完成了全选和反选的实现。