当前位置：首页 > 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 实现导航栏切图使用 Vue Router 实现基础导航在 Vue 项目中，可以通过 Vue Router 实现导航栏的路由切换。创建一个导航栏组件，并在其中使用 <router-li…

vue实现缩放

Vue 实现缩放的方法在 Vue 中实现缩放功能可以通过多种方式完成，以下是一些常见的方法：使用 CSS transform 属性通过 CSS 的 transform: scale() 属性可…

vue observer实现

Vue Observer 实现原理 Vue 的响应式系统核心是通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现的 Observer 模式。以下是关键实现细…

vue实现hovuer

Vue 实现 Hover 效果在 Vue 中实现 hover 效果可以通过多种方式完成，以下是几种常见的方法：使用 CSS 直接控制通过 :hover 伪类实现，无需额外的 JavaScrip…

mvvm实现vue

MVVM 模式在 Vue 中的实现 MVVM（Model-View-ViewModel）是一种前端架构模式，Vue 的设计灵感来源于此。以下是 MVVM 在 Vue 中的核心实现方式：数据绑定（M…

vue实现爬虫

Vue 实现爬虫的基本思路 Vue.js 本身是一个前端框架，主要用于构建用户界面。要实现爬虫功能，通常需要结合后端技术或浏览器自动化工具。以下是几种常见的方法：方法一：Vue + Node.js…

vue实现列表分类