快捷導(dǎo)航

Vue3如何按照某個(gè)字段將數(shù)組分成多個(gè)數(shù)組

更新時(shí)間：2025年07月30日 09:17:16 作者：滿

這篇文章主要介紹了Vue3如何按照某個(gè)字段將數(shù)組分成多個(gè)數(shù)組的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

方法一：使用 reduce 方法

const originalArray = [
  { id: 1, category: 'A', name: 'Item 1' },
  { id: 2, category: 'B', name: 'Item 2' },
  { id: 3, category: 'A', name: 'Item 3' },
  { id: 4, category: 'C', name: 'Item 4' },
  { id: 5, category: 'B', name: 'Item 5' },
];

const groupedByCategory = originalArray.reduce((acc, item) => {
  const key = item.category;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(item);
  return acc;
}, {});

// 結(jié)果是一個(gè)對(duì)象，鍵是分類，值是該分類下的數(shù)組
console.log(groupedByCategory);

方法二：使用 lodash 的 groupBy 方法

如果你項(xiàng)目中使用了 lodash，可以使用它的 groupBy 方法：

import { groupBy } from 'lodash';

const groupedByCategory = groupBy(originalArray, 'category');
console.log(groupedByCategory);

方法三：在 Vue 3 組件中使用計(jì)算屬性

import { computed } from 'vue';

export default {
  setup() {
    const originalArray = [
      { id: 1, category: 'A', name: 'Item 1' },
      { id: 2, category: 'B', name: 'Item 2' },
      // ...其他數(shù)據(jù)
    ];

    const groupedByCategory = computed(() => {
      return originalArray.reduce((acc, item) => {
        const key = item.category;
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(item);
        return acc;
      }, {});
    });

    return {
      groupedByCategory
    };
  }
};

方法四：轉(zhuǎn)換為數(shù)組的數(shù)組形式

const groupedArray = Object.values(
  originalArray.reduce((acc, item) => {
    const key = item.category;
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(item);
    return acc;
  }, {})
);

console.log(groupedArray);
// 輸出: [
//   [{ id: 1, category: 'A', name: 'Item 1' }, { id: 3, category: 'A', name: 'Item 3' }],
//   [{ id: 2, category: 'B', name: 'Item 2' }, { id: 5, category: 'B', name: 'Item 5' }],
//   [{ id: 4, category: 'C', name: 'Item 4' }]
// ]

在模板中使用

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談vue首屏加載優(yōu)化
這篇文章主要介紹了淺談vue首屏加載優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下
2023-07-07
??Vue3 自定義公共組件的實(shí)現(xiàn)實(shí)例
本文主要介紹了??Vue3 自定義公共組件的實(shí)現(xiàn)實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-11-11
vue.js實(shí)例對(duì)象+組件樹的詳細(xì)介紹
這篇文章主要介紹了vue.js實(shí)例對(duì)象+組件樹的相關(guān)資料,需要的朋友可以參考下
2017-10-10
vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue普通加密及國密SM2、SM3和sm4的使用例子
在我的項(xiàng)目中,甲方要求系統(tǒng)登錄時(shí)對(duì)密碼進(jìn)行加密后再傳給后端,指定使用國密SM3,下面這篇文章主要給大家介紹了關(guān)于vue普通加密及國密SM2、SM3和sm4使用的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue3處理模板和渲染函數(shù)的示例代碼
Vue.js是一個(gè)流行的前端框架,以其易于學(xué)習(xí)和使用而聞名,在Vue3中,借助于Composition API和新的setup語法糖,模板和渲染函數(shù)的使用變得更加靈活和強(qiáng)大,在這篇博客中,我們將深入探討Vue3是如何處理模板和渲染函數(shù)的,并通過示例代碼來展示如何有效利用這些功能
2024-11-11
Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
vue微信分享 vue實(shí)現(xiàn)當(dāng)前頁面分享其他頁面
這篇文章主要為大家詳細(xì)介紹了vue微信分享功能，vue實(shí)現(xiàn)當(dāng)前頁面分享其他頁面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能
這篇文章主要介紹了富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05