vue 商家商品全选

在Vue中实现商家商品全选功能，可以通过以下步骤：

1. 首先，在Vue的data中定义一个布尔变量selectedAll，用于记录全选的状态。将其初始值设为false。

2. 在商品列表中，为每个商品项添加一个选中状态的布尔变量isSelected，并将其初始值设为false。

3. 在全选的复选框上添加一个点击事件，当点击时，将selectedAll的值取反。可以使用@click指令来监听点击事件。

4. 在每个商品项的复选框上添加一个点击事件，当点击时，将isSelected的值取反。同样使用@click指令来监听点击事件。

5. 在全选复选框的点击事件中，遍历商品列表中的每个商品项，将isSelected的值设置为selectedAll的值。

实现代码如下：

<template>
  <div>
    <input type="checkbox" v-model="selectedAll" @click="selectAll" /> 全选
    <ul>
      <li v-for="(item, index) in productList" :key="index">
        <input type="checkbox" v-model="item.isSelected" @click="selectItem(index)" /> 商品{{ index+1 }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedAll: false,
      productList: [
        { name: '商品1', isSelected: false },
        { name: '商品2', isSelected: false },
        { name: '商品3', isSelected: false },
        // 添加更多商品项...
      ]
    }
  },
  methods: {
    selectAll() {
      for (let i = 0; i < this.productList.length; i++) {
        this.productList[i].isSelected = this.selectedAll;
      }
    },
    selectItem(index) {
      this.productList[index].isSelected = !this.productList[index].isSelected;
    }
  }
}
</script>

以上代码中，我们通过v-model指令实现了选中状态的绑定，当selectedAll的值改变时，全选复选框和商品项的选中状态都会发生相应的变化。通过点击事件，我们可以实现全选和取消全选的功能，以及单个商品项的选择和取消选择的功能。