^_^vue分类列表的实现，点击分类获取当前分类的列表

原创已于 2023-02-20 13:47:30 修改 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

于 2023-02-20 13:43:52 首次发布

本文介绍如何在Vue中实现分类列表的动态展示。通过定义数据属性记录当前激活分类，设置HTML结构并结合CSS实现高亮效果。点击分类时，利用Vue方法切换高亮并获取对应的分类商品列表。在组件创建完成后调用相关方法完成初始化。

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

分类页实现：

1、data中定义当前激活的下标，默认为第一个

data（） {
    return {
      activeIndex: 0, // 当前激活色下标  
    }
}

2、html中分类结构（高亮跟随以及点击事件）

<ul>
    <li v-for="(item, index) in cateList" :key="item.id"
        :class="{activeIndex === index ? 'active' : ''}"
        @click="clickCate(index)"
    >{{item.title}}</li>
</ul>

style中添加 active样式

li{
    &.active{
        color: pink;
    }
}

点击分类切换高亮

clickCate(index){
    this.activeIndex = index // 点击分类切换高亮
}

3、根据分类列表下标对应的i d 来获取右侧商品列表

fetchList(){
    listApi({
        id: this.cateList[activeIndex].id
    }).then(res => {
        this.List = [...res.data.data]
     })
}

4、created里面调用方法

created(){
    this.fetchList()
}