computed实现全选

computed属性可以用来实现全选功能。下面是一个使用computed属性实现全选的示例代码[^1]：

<template>
  <div>
    <input type="checkbox" v-model="selectAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.checked">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', checked: false },
        { id: 2, name: 'Item 2', checked: false },
        { id: 3, name: 'Item 3', checked: false }
      ]
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.checked);
      },
      set(value) {
        this.items.forEach(item => {
          item.checked = value;
        });
      }
    }
  }
};
</script>

在上面的代码中，我们使用了一个computed属性`selectAll`来实现全选功能。当点击全选按钮时，`selectAll`的setter方法会将所有的`item.checked`属性设置为相应的值，从而实现全选或全不选的效果。而getter方法则用来判断是否所有的`item.checked`属性都为true，从而决定全选按钮的状态。