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

分类页 实现：

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()
}