vue3实现多条件筛选时，联动acitve样式

在Vue 3中实现多条件筛选并联动样式的一个简单方法是使用计算属性和类绑定。以下是一个简单的例子：

<template>
  <div>
    <div
      v-for="filter in filters"
      :key="filter.id"
      :class="{ active: isActive(filter) }"
      @click="applyFilter(filter)"
    >
      {{ filter.name }}
    </div>
  </div>
</template>
 
<script>
import { ref, computed } from 'vue';
 
export default {
  setup() {
    const activeFilters = ref([]);
    const filters = [
      { id: 1, name: 'Filter 1', active: false },
      { id: 2, name: 'Filter 2', active: false },
      { id: 3, name: 'Filter 3', active: false },
      // ... 更多筛选条件
    ];
 
    const isActive = (filter) => activeFilters.value.includes(filter.id);
 
    const applyFilter = (filter) => {
      const index = activeFilters.value.indexOf(filter.id);
      if (index === -1) {
        activeFilters.value.push(filter.id);
      } else {
        activeFilters.value.splice(index, 1);
      }
    };
 
    return {
      filters,
      activeFilters,
      isActive,
      applyFilter,
    };
  },
};
</script>
 
<style>
.active {
  color: red; /* 或者其他你想要的样式 */
}
</style>

在这个例子中，我们定义了一个名为filters的响应式数组，它包含了所有的筛选条件。每个筛选条件都有一个唯一的id。我们还有一个名为activeFilters的响应式引用，它跟踪了当前激活的筛选条件的id列表。

isActive是一个计算属性，用于判断给定的筛选条件是否激活。如果activeFilters包含了筛选条件的id，它会返回true，这样就可以给对应的元素添加active类。

applyFilter方法用于在点击筛选条件时切换它的激活状态。如果筛选条件当前未激活，它会被添加到activeFilters数组中；如果已经激活，它将从数组中移除。

每次activeFilters更新时，所有使用v-for渲染的元素都会检查它们是否应该有active类，从而实现联动样式的效果。