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

介绍

在实现多条件筛选时，鼠标 hover 或者点击切换，会给当前选中项添加 active 样式，各个筛选项之前互不影响。如下图所示，主要实现了招聘信息的筛选条件，包括城市和职位信息，当鼠标 hover 时，会添加一个灰色的背景；当点击切换时，会添加一个蓝色的背景色。但是两个筛选条件互不干扰。

代码

template>
  div class="index">
    div class="place" v-for="(ele,idx) in state.filterList" :key="idx">
      p>{{ele.name}}p>
      div class="job-name-list">
        span v-for="(item,index) in ele.children" :key="index"
          :class="item.subName == ele.activeName ? 'active' : ''"
          @click