VUE：实现模块分类展示数据列表

最新推荐文章于 2024-07-17 17:46:23 发布

前端-如此如此。

最新推荐文章于 2024-07-17 17:46:23 发布

阅读量4.6k

点赞数 3

分类专栏： web前端之VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44136505/article/details/105113227

版权

该博客介绍了如何在Vue项目中实现模块分类展示数据列表的功能，通过点击不同标题来展示对应内容，同时鼓励读者互动交流技术问题。

摘要由CSDN通过智能技术生成

简介

项目中，会有一个模块展示多个类别的数据，点某一个标题只展示相关的内容。

具体实现

<template>
  <div>
    <div class="classifyToolBox">
      <div class="flexRowStart classifyToolBar">
        <div v-for="(item, index) in classifyToolData" :key="index" class="classifyToolBtn" :class="[currentIndex === index ? 'page-select' : '']" @click="clickFun(index)" >{
   {
   item}}</div>
      </div>
      <div class="classifyToolListBody">
        <div>这里是{
   {
   classifyToolData[currentIndex]}}的数据</div>
<!--        展示当前所选中分类标题对应的分类列表数据-->
        <div v-for="(item, index) in classifyToolList[currentIndex]" :key="index" class=""></div>