当前位置：首页 > VUE

vue实现列表分类

2026-03-08 22:00:59VUE

Vue 实现列表分类的方法

使用计算属性分类

通过计算属性对原始数组进行分类处理，返回分组后的对象或数组。适合静态数据或较少变动的场景。

computed: {
  groupedItems() {
    return this.items.reduce((groups, item) => {
      const category = item.category;
      if (!groups[category]) {
        groups[category] = [];
      }
      groups[category].push(item);
      return groups;
    }, {});
  }
}

模板中使用 v-for 嵌套渲染：

<div v-for="(group, category) in groupedItems" :key="category">
  <h3>{{ category }}</h3>
  <ul>
    <li v-for="item in group" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

使用过滤器方法

创建分类方法在模板中直接调用，灵活性更高，适合需要动态分类的场景。

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

模板调用示例：

vue实现列表分类

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

使用第三方库

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

import _ from 'lodash';
computed: {
  groupedItems() {
    return _.groupBy(this.items, 'category');
  }
}

动态分类组件

创建可复用的分类组件，通过插槽分发内容：

vue实现列表分类

Vue.component('category-list', {
  props: ['items', 'categoryKey'],
  template: `
    <div>
      <div v-for="(group, category) in groupedItems" :key="category">
        <slot name="header" :category="category"></slot>
        <slot name="body" :group="group"></slot>
      </div>
    </div>
  `,
  computed: {
    groupedItems() {
      return _.groupBy(this.items, this.categoryKey);
    }
  }
});

使用示例：

<category-list :items="products" category-key="type">
  <template v-slot:header="{ category }">
    <h2 class="category-title">{{ category }}</h2>
  </template>
  <template v-slot:body="{ group }">
    <product-card v-for="item in group" :key="item.id" :data="item"/>
  </template>
</category-list>

响应式分类

结合 Vuex 实现全局状态管理的分类：

const store = new Vuex.Store({
  state: {
    items: []
  },
  getters: {
    groupedItems: state => {
      return state.items.reduce((result, item) => {
        (result[item.category] || (result[item.category] = [])).push(item);
        return result;
      }, {});
    }
  }
});

组件中通过 mapGetters 访问：

import { mapGetters } from 'vuex';
computed: {
  ...mapGetters(['groupedItems'])
}

标签: 列表 vue

分享给朋友：

vue实现token

Vue 中实现 Token 认证的方法在 Vue 中实现 Token 认证通常涉及前端与后端的交互，包括 Token 的获取、存储、发送和刷新等操作。以下是具体实现步骤：获取 Token 用户登…

vue实现抖动

Vue 实现抖动效果在 Vue 中实现抖动效果可以通过 CSS 动画或 JavaScript 动画库来实现。以下是几种常见的方法：使用 CSS 动画通过定义 @keyframes 动画并在 V…

vue 动画实现

Vue 动画实现方式 Vue 提供了多种方式实现动画效果，主要分为内置组件和第三方库集成。使用 Vue 内置过渡组件 Vue 的 <transition> 和 <transiti…

vue实现curd

Vue实现CRUD操作初始化Vue项目使用Vue CLI创建新项目，安装必要依赖如axios用于HTTP请求 vue create crud-demo cd crud-demo npm inst…

vue jwt实现

Vue JWT 实现方法安装依赖确保项目中安装了 jsonwebtoken（后端）和 axios（前端）。若使用 Vue 3，可搭配 vue-router 和 pinia（或 vuex）管理状态。…

vue实现Pop

Vue 实现 Popover 组件的方法使用 Vue 内置指令 v-show/v-if 和事件监听通过 Vue 的指令和事件绑定实现基础的 Popover 功能。定义一个布尔值控制 Popover…

vue实现列表分类