vue实现物品全选代码

以下是在Vue中实现物品全选功能的代码示例，分为数据绑定、全选逻辑和列表渲染三部分：

数据绑定

定义数据模型存储物品列表和全选状态：

data() {
  return {
    items: [
      { id: 1, name: '物品A', selected: false },
      { id: 2, name: '物品B', selected: false },
      { id: 3, name: '物品C', selected: false }
    ],
    selectAll: false
  }
}

全选逻辑

实现全选/取消全选的切换方法：

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.selected = this.selectAll
    })
  },
  checkSelectAll() {
    this.selectAll = this.items.every(item => item.selected)
  }
}

列表渲染

模板中使用v-model绑定选择状态：

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
      全选
    </label>

    <div v-for="item in items" :key="item.id">
      <label>
        <input 
          type="checkbox" 
          v-model="item.selected"
          @change="checkSelectAll">
        {{ item.name }}
      </label>
    </div>
  </div>
</template>

注意事项

• 当单独勾选项目时需要调用checkSelectAll方法检查是否满足全选条件
• 使用v-model实现双向数据绑定简化状态管理
• 通过every数组方法检测所有项目是否被选中