Vue3如何按照某个字段将数组分成多个数组
更新时间：2025年07月30日 09:17:16 作者：滿
这篇文章主要介绍了Vue3如何按照某个字段将数组分成多个数组的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
方法一：使用 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;
}, {});
// 结果是一个对象，键是分类，值是该分类下的数组
console.log(groupedByCategory);方法二：使用 lodash 的 groupBy 方法
如果你项目中使用了 lodash，可以使用它的 groupBy 方法：
import { groupBy } from 'lodash';
const groupedByCategory = groupBy(originalArray, 'category');
console.log(groupedByCategory);方法三：在 Vue 3 组件中使用计算属性
import { computed } from 'vue';
export default {
setup() {
const originalArray = [
{ id: 1, category: 'A', name: 'Item 1' },
{ id: 2, category: 'B', name: 'Item 2' },
// ...其他数据
];
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
};
}
};方法四：转换为数组的数组形式
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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈vue首屏加载优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要给大家介绍了关于Vue如何动态设置el-table操作列的宽度自适应,很多页面都需要用到表格组件el-table,如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列,需要的朋友可以参考下2023-07-07
本文主要介绍了Vue3 自定义公共组件的实现实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-11-11
这篇文章主要介绍了vue.js实例对象+组件树的相关资料,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了vue+element ui实现锚点定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,下面这篇文章主要给大家介绍了关于vue普通加密及国密SM2、SM3和sm4使用的相关资料,需要的朋友可以参考下2022-12-12
Vue.js是一个流行的前端框架,以其易于学习和使用而闻名,在Vue3中,借助于Composition API和新的setup语法糖,模板和渲染函数的使用变得更加灵活和强大,在这篇博客中,我们将深入探讨Vue3是如何处理模板和渲染函数的,并通过示例代码来展示如何有效利用这些功能2024-11-11
这篇文章主要给大家介绍了关于Vue3在router中使用pinia报错的简单解决办法,什么是pinia,可以理解为状态管理工具,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了vue微信分享功能，vue实现当前页面分享其他页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要介绍了富文本编辑器vue2-editor实现全屏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
最新评论