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

发呆的小蔡°

已于 2023-04-07 18:29:40 修改

阅读量1.3k

点赞数 1

分类专栏： Vue3.2 Vue(Vue2) 文章标签： vue3 联动active样式 html css3

于 2023-04-07 18:17:03 首次发布

本文链接：https://blog.youkuaiyun.com/Shivy_/article/details/130017975

版权

本文介绍如何在 Vue3 中实现多条件筛选功能，如城市和职位筛选，当鼠标悬停或点击时，为当前选中项添加不同背景色，且不同筛选条件之间效果独立。内容涉及 HTML、CSS3 和 Vue3 的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

在实现多条件筛选时，鼠标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

最低0.47元/天解锁文章