Vue作业:利用计算属性和监听属性实现选项全选与全不选

在Vue.js中，你可以通过计算属性（Computed Properties）和数据绑定（或者说监听属性，即`v-model`）结合来实现选项的全选与全不选功能。这里是一个简单的示例：

首先，假设你有一个数组`options`，每个元素都有一个`selected`属性表示是否被选中。

<!-- HTML模板 -->
<template>
  <div>
    <input type="checkbox" v-model="selectAll" /> 全选
    <ul>
      <li v-for="(option, index) in options" :key="index">
        <input type="checkbox" :checked="option.selected" @change="toggleOption(index)" />
        {{ option.name }}
      </li>
    </ul>
  </div>
</template>

在这个模板中，我们有一个全局的`selectAll`计算属性，用于控制所有选项的选中状态。然后对于每一个选项，其`selected`属性会随着用户的勾选而同步变化。

接下来，我们定义一个计算属性和事件处理函数：

// JavaScript (通常是mixins或者methods部分)
export default {
  data() {
    return {
      options: [], // 初始化你的选项列表
      selectAll: false, // 初始全不选状态
    };
  },
  computed: {
    selectedOptions() {
      return this.options.map(option => ({ ...option, selected: this.selectAll }));
    }
  },
  methods: {
    toggleOption(index) {
      this.options[index].selected = !this.selectAll;
      if (!this.selectAll) { // 如果不是全选状态，则反向设置全选
        this.selectAll = false;
        for (let i = 0; i < this.options.length; i++) {
          if (this.options[i].selected) {
            this.selectAll = true;
            break;
          }
        }
      }
    }
  }
}

当用户选择或取消选择某一项时，`toggleOption`方法会被触发，它会更新对应的`option.selected`值，并根据当前的选择状态调整`selectAll`。如果所有选项都被取消，那么`selectAll`会被设置为`false`，反之亦然。