【vue js】将数组元素,按照2个一组,重组为2维数组

news2024/11/15 15:28:49

实现效果:

要实现上述,2张图片为一个走马灯的内容,而后端传回的数据是一个数组。我采用的是将数据重组为2维数组的方法。

因为没有强制要求展示顺序,我采用将首尾组合的方式组成一个数组元素;

首先判断原始数据长度的奇偶性,如果是偶数的话,循环原始数据长度/2,每次循环创造一个新数组,并将首尾元素push进去。元素下标分别是i,原始数据长度-i-1;再将新数组push进走马灯要用到的数组。

如果是奇数的话,循环原始数据长度/2并向上取整,当i不等于循环原始数据长度/2并向上取整-1的时候,每次循环创造一个新数组,并将首尾元素push进去。元素下标分别是i,原始数据长度-i-1;再将新数组push进走马灯要用到的数组;否则创造一个新数组并push进下标为i的元素,再push进走马灯用的数组就行。

        if(this.List.length%2==0){
          for(let i=0;i<this.List.length/2;i++){
            let List2=[]
            List2.push(this.List[i])
            List2.push(this.List[this.List.length-i-1])
            this.fzList.push(List2)
          }
        }else{
          for(let i=0;i<Math.ceil(this.List.length/2);i++){
            if(i != Math.ceil(this.List.length/2)-1){
              let List2=[]
            List2.push(this.List[i])
            List2.push(this.List[this.List.length-i-1])
            this.fzList.push(List2)
            }else{
              let List2=[]
              List2.push(this.List[i])
              this.fzList.push(List2)
            }
            
          }
        }

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

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

相关文章

onnx 1.16 doc学习笔记四:python API-If和Scan

onnx作为一个通用格式&#xff0c;很少有中文教程&#xff0c;因此开一篇文章对onnx 1.16文档进行翻译与进一步解释&#xff0c; onnx 1.16官方文档&#xff1a;https://onnx.ai/onnx/intro/index.html](https://onnx.ai/onnx/intro/index.html)&#xff0c; 如果觉得有收获&am…

$attrs

一、概念 vue官网定义如下: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过v-bind="$attrs"传入内部组件——在创建…

【高德地图】Android高德地图控件交互详细介绍

&#x1f4d6;第5章 与地图控件交互 ✅控件交互&#x1f9ca;缩放按钮&#x1f9ca;指南针&#x1f9ca;定位按钮&#x1f9ca;地图Logo ✅手势交互&#x1f9ca;缩放手势&#x1f9ca;滑动手势&#x1f9ca;旋转手势&#x1f9ca;倾斜手势&#x1f9ca;指定屏幕中心点的手势操…

无线传感器网络简单介绍

&#xff08;本文为简单介绍&#xff0c;内容来源自网络&#xff09; 无线传感器网络&#xff08;Wireless Sensor Networks&#xff09;是一种创新的传感器网络架构&#xff0c;具有广泛的应用前景和潜力。与传统的有限传感器网络不同&#xff0c;无线传感器网络克服了节点数…

在苹果电脑MAC上安装Windows10(双系统安装的详细图文步骤教程)

在苹果电脑MAC上安装Windows10&#xff08;双系统安装的详细图文步骤教程&#xff09; 一、准备工作准备项1&#xff1a;U盘作为系统安装盘准备项2&#xff1a;您需要安装的系统镜像 二、启动转换助理步骤1&#xff1a;找到启动转换助理步骤2&#xff1a;启动转换助理步骤3&…

基于springboot+vue的安康旅游网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

【Java EE初阶二十】http的简单理解(一)

1. 初识http HTTP 最新的版本应该是 HTTP/3.0&#xff0c;目前大规模使用的版本 HTTP/1.1&#xff1b; 下面来简单说明一下使用 HTTP 协议的场景: 1、浏览器打开网站 (基本上) 2、手机 APP 访问对应的服务器 (大概率) 前面的 TCP与UDP 和http不同&#xff0c;HTTP 的报文格式&a…

基于Embedding召回和DSSM双塔模型

文章目录 基于Embedding召回介绍基于Embedding召回算法分类I2I召回U2I召回 DSSM模型DSSM双塔模型层次 基于Embedding召回介绍 基于embedding的召回是从内容文本信息和用户查询的角度出发&#xff0c;利用预训练的词向量模型或深度学习模型&#xff0c;将文本信息转换成向量进行…

【PyQt】15-让控件支持拖拽工作

文章目录 前言一、控件的拖拽-setAcceptDrops()1.1 代码1.2 运行结果 总结 前言 允许控件的拖拽操作&#xff0c;后续可以升级为拖拽图片之类的。hasHtml()、hasUrls()、hasImage() 一、控件的拖拽-setAcceptDrops() 比如把A放到B&#xff0c;需要两步 B—setAcceptDrops(Tru…

Hudi程序导致集群RPC偏高问题分析

1、背景 Hudi程序中upsert操作频繁&#xff0c;过多的删除和回滚操作,导致集群RPC持续偏高 2、描述 hudi采用的是mvcc设计&#xff0c;提供了清理工具cleaner来把旧版本的文件分片删除&#xff0c;默认开启了清理功能&#xff0c;可以防止文件系统的存储空间和文件数量的无限…

【自然语言处理】:实验5,司法阅读理解

清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现&#xff08;实验满分&#xff09;&#xff0c;只展示主要任务实验结果&#xff0c;如果需要详细的实验报告或者代码可以私聊博主 有任何疑问或者问题&#xff0c;也欢…

配置redis-cell 控流插件

1.下载绑定资源也可以到git上下载 https://gitee.com/dianjinshi/springboot-nginx.git 2.创建文件夹 mkdir redis-cell 3.上传到linux上并进入文件夹解压 4.拷贝 docker cp libredis_cell.so redis:/usr/local/etc/redis 5.重启redis docker restart redis 6.进入redis…

六、回归与聚类算法 - 欠拟合和过拟合

目录 1、定义 2、原因及解决方法 2.1 正则化 线性回归欠拟合与过拟合线性回归的改进 - 岭回归分类算法&#xff1a;逻辑回归模型保存与加载无监督学习&#xff1a;K-means算法 1、定义 2、原因及解决方法 2.1 正则化

【Emgu CV教程】7.3、图像锐化之手搓代码实现直方图均衡化

文章目录 一、介绍1.写在前面2.彩色图像直方图均衡化函数 二、举例 一、介绍 1.写在前面 上一篇文章介绍的是直方图均衡化&#xff0c;使用Emgu CV的EqualizeHist()函数。它对于背景和前景都太亮或者太暗的图像非常有用&#xff0c;而且计算速度非常快&#xff0c;简单又好用…

NXP实战笔记(七):S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

目录 1、概述 2、输入捕获SDK配置 2.1、SAIC中断方式 2.2、IPWM或者IPM 1、概述 输入捕获&#xff0c;可以抓取高电平时间、低电平时间、占空比、周期、边沿检测与回调函数、边沿计数&#xff08;ABZ解码&#xff09;、时间戳、唤醒中断。 记录一下根据Emios模块实现上述部分…

论文精读--word2vec

word2vec从大量文本语料中以无监督方式学习语义知识&#xff0c;是用来生成词向量的工具 把文本分散嵌入到另一个离散空间&#xff0c;称作分布式表示&#xff0c;又称为词嵌入&#xff08;word embedding&#xff09;或词向量 Abstract We propose two novel model architec…

LeetCode 热题 100 | 二叉树(终)

目录 1 二叉树小结 1.1 模式一 1.2 模式二 2 236. 二叉树的最近公共祖先 3 124. 二叉树中的最大路径和 菜鸟做题&#xff08;返校版&#xff09;&#xff0c;语言是 C 1 二叉树小结 菜鸟碎碎念 通过对二叉树的练习&#xff0c;我对 “递归” 有了一些肤浅的理解。…

适用于 Windows 10、11 的 5 款最佳免费文件恢复软件

最好的免费文件恢复软件是什么&#xff1f; 如今&#xff0c;人们通常将数据保存在硬盘或云备份上。除此之外&#xff0c;您还可以将重要数据存储在 USB 或其他电子设备上。 但是&#xff0c;如果您遇到存储设备故障、存储设备逻辑故障或意外删除&#xff0c;您可能会丢失文件…

Android控件WebView实现完整截图

最近总能看到好多APP都支持文章和网页的长截图&#xff0c;出于好奇研究了一下&#xff0c;分享给大家。 网上有好多的例子&#xff0c;其中好多都是已经过时的就不在复述了&#xff0c;我发现有一种还是比较通用的方法。 //android 5.0 之后需要开启浏览器的整体缓存才能截取…

后端程序员入门react笔记(四)-综合运用,写一个小demo

样式模块化 有时候我们会遇到这样的问题&#xff0c;有两个css对一个class声明了样式&#xff0c;这样的话后引入的css会覆盖前面的css样式&#xff0c;导致样式冲突&#xff0c;那么我们怎么解决这种问题呢&#xff0c;我们可以使用样式的模块化&#xff0c;我们起名一个inde…