vue 点击按钮进行全选

可以通过以下步骤实现 Vue 点击按钮进行全选：

1. 首先，在 Vue 组件中定义一个数据对象，用于存储选项的状态（选中/未选中）。

data() {
  return {
    options: [
      { id: 1, name: 'Option 1', selected: false },
      { id: 2, name: 'Option 2', selected: false },
      { id: 3, name: 'Option 3', selected: false },
      { id: 4, name: 'Option 4', selected: false }
    ]
  };
}

2. 接下来，在模板中使用 v-for 指令渲染选项列表，并使用 v-model 指令绑定每个选项的选中状态。

<div v-for="option in options" :key="option.id">
  <input type="checkbox" v-model="option.selected">{{ option.name }}
</div>

3. 最后，定义一个点击事件处理函数，用于处理全选按钮的点击事件。在该函数中，遍历选项列表，将每个选项的选中状态设置为与全选按钮相同的状态。

methods: {
  selectAll() {
    const allSelected = this.options.every(option => option.selected);
    this.options.forEach(option => option.selected = !allSelected);
  }
}

在模板中，添加一个全选按钮，并绑定点击事件到上述处理函数。

<button @click="selectAll">全选</button>

这样，当点击该按钮时，所有选项的选中状态将会设置为与全选按钮相同的状态，实现了 Vue 点击按钮进行全选的功能。