前端如何将后台数组进行等分切割

前端如何切割数组

目标:前端需要做轮播,一屏展示12个,后端返回的数组需要进行切割,将数据以12为一组进行分割

环境:vue3+ts+element plus

代码如下:

function divideArrayIntoEqualParts(array, chunkSize) {const length = array.length;const dividedArray = [];for (let i = 0; i < length; i += chunkSize) {const chunk = array.slice(i, i + chunkSize);dividedArray.push(chunk);}return dividedArray;
}const backendArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
const dividedArray = divideArrayIntoEqualParts(backendArray, 12);

原数据展示:长度为40
在这里插入图片描述

按12一组分割后的数据
在这里插入图片描述
实现代码(vue3+ts):将后台请求的数据state.categoryList赋值给backendArray;12就是你需要每组按多少进行分割

在这里插入图片描述
分割的数据循环遍历展示即可:
在这里插入图片描述
页面展示效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lv3 嵌入式开发-4 linux shell命令(文件搜索、文件处理、压缩)

目录 1 查看文件相关命令 1.1 常用命令 1.2 硬链接和软链接 2 文件搜索相关命令 2.1 查找文件命令 2.2 查找文件内容命令 2.3 其他相关命令 3 文件处理相关命令 3.1 cut 3.2 sed 过滤 3.3 awk 匹配 4 解压缩相关命令 4.1 解压缩文件的意义 4.2 解压缩相关命令 1 …

智慧公厕破解公共厕所管理的“孤岛现象”

在现代社会中&#xff0c;公共厕所是城市管理中的一项重要任务。然而&#xff0c;经常会出现公厕管理的“孤岛现象”&#xff0c;即每个公厕都是独立运作&#xff0c;缺乏统一的管理和监控机制。针对这一问题&#xff0c;智慧公厕的出现为解决公共厕所管理难题带来了新的方案。…

【Unity3D】UI Toolkit样式选择器

1 前言 UI Toolkit简介 中介绍了样式属性&#xff0c;UI Toolkit容器 和 UI Toolkit元素 中介绍了容器和元素&#xff0c;本文将介绍样式选择器&#xff08;Selector&#xff09;&#xff0c;主要包含样式类选择器&#xff08;Class Selector&#xff09;、C# 类选择器&#xf…

C++ 结构体

前文 C中的结构体是一种非常有用的数据类型&#xff0c;它允许我们将不同的变量组合在一起&#xff0c;形成一个自定义的数据结构。 结构体在C中的应用非常广泛&#xff0c;它可以用来表示和管理各种实体、对象或数据的属性。比如&#xff0c;在一个学生管理系统中&#xff0c…

阿里云和腾讯云2核2G服务器价格和性能对比

2核2G云服务器可以选择阿里云服务器或腾讯云服务器&#xff0c;腾讯云轻量2核2G3M带宽服务器95元一年&#xff0c;阿里云轻量2核2G3M带宽优惠价108元一年&#xff0c;不只是轻量应用服务器&#xff0c;阿里云还可以选择ECS云服务器u1&#xff0c;腾讯云也可以选择CVM标准型S5云…

实现在一张图片中寻找另一张图片的目标

OpenCV库中的SIFT特征检测算法和FLANN&#xff08;快速最近邻搜索库&#xff09;匹配算法来找到一个图片中的元素在另一个图片中的位置&#xff0c;并在源图片中标出它们的位置。 以下是一个简单的例子&#xff0c;使用OpenCV库&#xff0c;利用SIFT特征检测算法&#xff0c;在…

《向量数据库》——向量数据库Milvus 和大模型出联名款AI原生Milvus Cloud

大模型技术的发展正加速对千行百业的改革和重塑,向量数据库作为大模型的海量记忆体、云计算作为大模型的大算力平台,是大模型走向行业的基石。而电商行业因其高度的数字化程度,成为打磨大模型的绝佳“战场”。 在此背景下,Zilliz 联合亚马逊云科技举办的【向量数据库 X 云计…

云服务器下如何部署Django项目详细操作步骤

前期本人完成了“编写你的第一个 Django 应用程序”&#xff0c;有了一个简单的项目代码&#xff0c;在本地window系统自测没问题了&#xff0c;接下来就想办法部署到服务器上&#xff0c;可以通过公网访问我们的Django项目。将开发机器上运行的开发版软件实际安装到服务器上进…

鼠标知识系列之星闪鼠标

随着 2023.8.4 华为 HDC 大会的落幕&#xff0c;一个新的名词开始进入了人们的视线&#xff1a;星闪 NaerLink&#xff0c;随着星闪技术引入键鼠圈子的还有一个名词&#xff1a;星闪鼠标。 正如我们之前鼠标知识分享系列提到过的&#xff0c;目前市面上的鼠标主要是有线鼠标和…

烟感报警器单片机方案开发,解决方案

烟感报警器也叫做烟雾报警器。烟感报警器适用于火灾发生时有大量烟雾&#xff0c;而正常情况下无烟的场所。例如写字楼、医院、学校、博物馆等场所。烟感报警器一般安装于所需要保护或探测区域的天花板上&#xff0c;因火灾中烟雾比空气轻&#xff0c;更容易向上飘散&#xff0…

在FPGA上快速搭建以太网

在本文中&#xff0c;我们将介绍如何在FPGA上快速搭建以太网 &#xff08;LWIP &#xff09;。为此&#xff0c;我们将使用 MicroBlaze 作为主 CPU 运行其应用程序。 LWIP 是使用裸机设计以太网的良好起点&#xff0c;在此基础上我们可以轻松调整软件应用程序以提供更详细的应用…

【MySQL基础】一条查询和更新语句的执行流程01-02

目录 MySQL的基本架构示意图连接器查询缓存分析器优化器执行器重要的日志模块&#xff1a;redo log重要的日志模块&#xff1a;binlog更新时redo log 和 binlog 两阶段提交 例如在执行下面这个查询语句&#xff1a; mysql> select * from T where ID10&#xff1b;MySQL的基…

Apache Hive之数据查询

文章目录 版权声明数据查询环境准备基本查询准备数据select基础查询分组、聚合JOINRLIKE正则匹配UNION联合Sampling采用Virtual Columns虚拟列 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明&#xff0c;所有版权属于黑马程序员或相关权利…

GPT引领前沿热点、AI绘图

GPT对于每个科研人员已经成为不可或缺的辅助工具&#xff0c;不同的研究领域和项目具有不同的需求。如在科研编程、绘图领域&#xff1a; 1、编程建议和示例代码: 无论你使用的编程语言是Python、R、MATLAB还是其他语言&#xff0c;都可以为你提供相关的代码示例。 2、数据可…

vue2中实现 TDesign 树形懒加载

之前我有写过Element ui的树形懒加载 其主要是通过load函数来实现 而TDesign也是照虎画猫 他也是主要靠load 我们先来看一个基本的组件 <template><t-tree :data"items" :load"load" /> </template><script lang"jsx">…

【每天一道算法题】day2-认识时间复杂度

认识时间复杂度&#xff1a; O&#xff1a;读作big O&#xff0c;在数学上指的是上限的意思 常数时间的操作 一个操作如果和样本的数据量没有关系&#xff0c;每次都是固定时间内完成的操作&#xff0c;叫做常数操作。时间复杂度为一个算法流程中&#xff0c;常数操作数量的一…

交友盲盒完整版——详细源码分享

现在目前比较火热的一款app交友盲盒是通过uniappspringboot技术来制作的&#xff0c;原理其实很简单&#xff0c;大家一看便知。 大家自行下载到手机里面去使用即可&#xff0c;不支持ios手机 演示地址&#xff1a;https://share.weiyun.com/l3ovztce 下面就是给大家分享源码了…

【C++】可变参数模板

2023年9月9日&#xff0c;周六下午 这个还是挺难学的&#xff0c;我学了好几天... 在这里我会举大量的示例程序&#xff0c;这样可以有一个更好的理解&#xff0c; 不定期更新。 目录 推荐文章&#xff1a; 示例程序一&#xff1a;拼接字符串 示例程序二&#xff1a;求整…

局域网ntp服务器设置(windows时间同步服务器NetTime)(ubuntu systemd-timesyncd ntp客户端)123端口、ntp校时

文章目录 背景windows如何配置ntp服务器手动配置配置参数AnnounceFlags和Enabled含义 使用软件配置&#xff08;NetTime&#xff09;实操相关疑问&#xff1a;0.nettime.pool.ntp.org是什么&#xff1f; 注意事项请务必检查windows主机123端口是否已被占用&#xff0c;方法请参…

华为云云耀云服务器L实例评测|在Docker环境下部署Ward服务器监控工具

华为云云耀云服务器L实例评测&#xff5c;在Docker环境下部署Ward服务器监控工具 一、前言1.1 云耀云服务器L实例简介1.2 Ward简介1.3 Ward特点 二、本次实践介绍2.1 本次实践简介2.2 本次环境规划 三、购买云耀云服务器L实例3.1 购买云耀云服务器L实例3.3 查看云耀云服务器L实…