多行商品筛选栏高亮切换

要实现多行商品筛选栏的高亮切换效果，您可以按照以下步骤进行操作：

1. 在 Vue 组件中，为每个筛选项添加一个状态属性，用于跟踪当前是否被选中的状态。
2. 在点击筛选项的事件处理程序中，更新对应筛选项的状态属性值。
3. 使用动态绑定将选中状态与CSS类绑定，以实现高亮效果。

以下是一个示例代码片段，演示如何实现多行商品筛选栏的高亮切换效果：

<template>
  <div>
    <div class="filter-bar">
      <div
        v-for="(row, rowIndex) in filterRows"
        :key="rowIndex"
        class="filter-row"
      >
        <div
          v-for="(filter, filterIndex) in row"
          :key="filterIndex"
          :class="{ 'active': filter.isActive }"
          @click="toggleFilter(filter)"
        >
          {{ filter.name }}
        </div>
      </div>
    </div>
    <div class="product-list">
      <!-- 商品列表内容 -->
    </div>
  </div>
</template>

<style>
.filter-bar {
  display: flex;
  flex-direction: column;
}

.filter-row {
  display: flex;
}

.filter-row > div {
  padding: 10px;
  cursor: pointer;
}

.filter-row > .active {
  background-color: yellow;
}

.product-list {
  /* 商品列表样式 */
}
</style>

<script>
export default {
  data() {
    return {
      filterRows: [
        [
          { name: '筛选项1', isActive: false },
          { name: '筛选项2', isActive: false },
          { name: '筛选项3', isActive: false },
        ],
        [
          { name: '筛选项4', isActive: false },
          { name: '筛选项5', isActive: false },
          { name: '筛选项6', isActive: false },
        ],
      ],
    };
  },
  methods: {
    toggleFilter(filter) {
      filter.isActive = !filter.isActive; // 切换选中状态
    },
  },
};
</script>

在上述代码中，我们使用 `v-for` 循环渲染了 `filterRows` 数组中的每一行筛选项，并为每个筛选项添加了点击事件。在点击事件处理程序中，我们通过切换 `isActive` 属性值来更新选中状态。然后，使用动态绑定将选中状态与 CSS 类 `active` 绑定，以实现高亮效果。

请根据您的实际需求和样式设置进行适当的调整。