当前位置：首页 > VUE

vue实现列表分类

2026-03-29 09:11:54VUE

Vue 实现列表分类的方法

使用计算属性分类

通过计算属性对原始数组进行分组处理，返回分类后的数据结构。例如按商品类别分类：

computed: {
  categorizedList() {
    return this.originalList.reduce((acc, item) => {
      if (!acc[item.category]) {
        acc[item.category] = []
      }
      acc[item.category].push(item)
      return acc
    }, {})
  }
}

模板中通过嵌套 v-for 渲染：

<div v-for="(items, category) in categorizedList" :key="category">
  <h3>{{ category }}</h3>
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</div>

使用过滤器方法

创建分类过滤器方法，在模板中直接调用：

methods: {
  filterByCategory(category) {
    return this.list.filter(item => item.category === category)
  }
}

模板使用：

<div v-for="category in categories" :key="category">
  <h3>{{ category }}</h3>
  <div v-for="item in filterByCategory(category)" :key="item.id">
    {{ item.name }}
  </div>
</div>

使用第三方库

借助 lodash 的 groupBy 实现快速分类：

import _ from 'lodash'

computed: {
  groupedList() {
    return _.groupBy(this.list, 'category')
  }
}

动态分类实现

当分类标准需要动态变化时，可以使用响应式变量：

data() {
  return {
    groupKey: 'category' // 可动态修改为其他字段
  }
},
computed: {
  dynamicGroup() {
    return this.list.reduce((acc, item) => {
      const key = item[this.groupKey]
      acc[key] = acc[key] || []
      acc[key].push(item)
      return acc
    }, {})
  }
}

带排序的分类实现

分类同时保持每组内部排序：

computed: {
  sortedGroups() {
    const groups = {}
    this.list
      .sort((a, b) => a.name.localeCompare(b.name))
      .forEach(item => {
        const group = item.category
        groups[group] = groups[group] || []
        groups[group].push(item)
      })
    return groups
  }
}

服务器端分类

当数据量较大时，建议在后端完成分类，前端接收已分类的数据结构：

vue实现列表分类

async fetchData() {
  const res = await axios.get('/api/items?group=category')
  this.groupedData = res.data
}

每种方法适用于不同场景，计算属性方式最常用且性能较好，适合前端数据量适中的情况。大数据量建议采用服务器端分类方案。

标签: 列表 vue

分享给朋友：

vue如何实现注册

实现用户注册功能在Vue中实现注册功能通常需要结合前端表单和后端API交互。以下是完整的实现方案：创建注册表单组件注册表单需要包含用户名、邮箱、密码等基本字段，并进行表单验证： <te…

vue实现下拉刷新组件

实现下拉刷新组件的核心思路下拉刷新功能通常通过监听触摸事件、滚动位置和动画效果实现。Vue中可以利用自定义指令或封装组件完成，以下为两种常见实现方式。基于自定义指令的实现创建指令监听触摸事件，…

vue 实现流程

Vue 实现流程 Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是 Vue 实现的基本流程：安装 Vue.js 通过 CDN 引入或使用 npm/yarn 安装：…

甘特图vue实现

甘特图 Vue 实现方法使用开源库 vue-ganttastic 安装依赖： npm install vue-ganttastic 基础实现代码： <template> <…

vue实现flbook

Vue 实现类似 Flbook 的翻页效果要实现类似 Flbook 的翻页效果，可以使用 Vue 结合 CSS 动画和 JavaScript 事件处理。以下是实现方法：安装依赖需要安装 vue…

vue实现addclass

Vue 实现动态添加 class 的方法在 Vue 中动态添加 class 可以通过多种方式实现，以下是常见的几种方法：使用对象语法通过绑定一个对象到 :class，可以动态切换 class…

vue实现列表分类