当前位置: 首页 > news >正文

vue.js处理数组对象中某个字段是否变为两个字段

一、场景:

        产品要求做一个时间步骤条,使用目前后端已返回的数据进行操作实现。时间步骤条要求日期和时间分开显示且相同日期只显示第一个日期。

图左边为实现效果,右边为后台返回的接口。接口中current字段表示当前到达第几步,从0开始,对应显示数组的前几个展示。后台返回的是一个整的日期时间字段dateTime。

二、处理思路:

  • 拿出nodes数组对象中与current字段对应的步骤数据放入新数组slicedNodes
  • 再循环处理slicedNodes数组对象里的dateTime字段,将其拆分成date, time两个字段
  • 比较date字段是否有重复的,没有则赋值该字段到一个新数组prevDate
  • 将新数组添加到result数组即可组装完成。

三、代码实现:

computed: {// 过程数组processedNodes() {// 将数组截取的副本返回到新的数组对象:array.slice[start, end)const slicedNodes = this.twrProcess?.nodes.slice( 0, parseInt(this.twrProcess?.current,10) + 1);const result = [];let prevDate = null;slicedNodes?.forEach((node) => {// 将dateTime日期时间字段拆分成date, time两个字段const [date, time] = node.dateTime.split(" ");const newObj = { ...node };// 将不一致的date放入newObj.dateif (date !== prevDate) {newObj.date = date;prevDate = date;}newObj.time = time;result.push(newObj);});return result;},},

相关文章:

vue.js处理数组对象中某个字段是否变为两个字段

一、场景: 产品要求做一个时间步骤条,使用目前后端已返回的数据进行操作实现。时间步骤条要求日期和时间分开显示且相同日期只显示第一个日期。 图左边为实现效果,右边为后台返回的接口。接口中current字段表示当前到达第几步,从…...

从零开始的C++(补充三的内容)

auto:在编译阶段根据数据的类型确认auto所代表的类型,并将auto换成对应的类型。 特点: 1、auto所能代表的类型必须是在编译阶段就能确认的。 2、auto修饰的变量必须初始化,否则编译器无法判断auto的实际类型。 3、auto会根据第一个数据来…...

微信小程序通过createSelectorQuery获取元素 高度,宽度与界面距离

小程序官方有提供给我们一个 const query wx.createSelectorQuery() 函数 我们可以先编写这样一段代码 wxml <view><button bindtap"getDom">点击查看</button><view class "textIn" style "height: 100px;width: 30px;&quo…...

MySQL-事务

MySQL-事务 1.什么是事务 举例&#xff1a;想象炒菜的过程。 洗菜切菜炒菜装盘 我相信缺少任何任何一个步骤&#xff0c;都不完美&#xff01;&#xff01;&#xff01;可以将炒菜的过程理解为一个事务&#xff0c;是一组操作的集合&#xff0c;而MySQL中的事务也是如此。但…...

自动定时删除磁盘文件的脚本(从文件日期最早的开始删)

#!/bin/bash# 指定的挂载点 MOUNTPOINT"/media/vm/MyDisk512GB"# 设置磁盘大小的限制 (例如&#xff1a;800G) LIMIT$((800 * 1024 * 1024)) # 单位是KB# 获取挂载点的已使用空间 USED_SPACE$(df -kP "$MOUNTPOINT" | tail -1 | awk {print $3})echo &quo…...

拆解CPU的基本结构和运行原理

CPU的基本结构 CPU是一个计算系统的核心 南北桥芯片将CPU与外设连接起来 CPU执行流程 CPU的电路基础 组合电路基本原理 时序电路基本原理 多核成为主流 汇编语言和寄存器 中断的基本原理 中断的产生 中断服务程序 CPU 做为计算机的总司令官&#xff0c;它管理着计算…...

Docker安装——Ubuntu (Jammy 22.04)

一、为什么要用 Ubuntu&#xff1f;(centos和ubuntu有什么区别&#xff09; 使用lsb_release命令&#xff1a;lsb_release -a &#xff0c;即可查看ubantu的版本&#xff0c;但是为什么要使用ubantu 呢&#xff1f; 区别&#xff1a;1、centos基于EHEL开发&#xff0c;而ubunt…...

Fast DDS之Transport

目录 transport层负责为DDS用户数据收发和服务发现提供通信。包含UDP&#xff0c;TCP&#xff0c;SHM。...

爱普生L125X_L325X系列打印机Wi-Fi配置方法(Smart Panel)

准备工作&#xff1a; 手机需要下载“Epson Smart Panel”APP&#xff1b; 配置无线&#xff08;Wi-Fi&#xff09;方法 说明&#xff1a;SSID名称&#xff08;Wi-Fi名&#xff09;不能包含中文字符,路由器需要选择2.4GHz频段; 1. 打开“Epson Smart Panel”软件&#xff0…...

【回顾一下Docker的基本用法】

文章目录 回顾一下Docker的基本用法1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结 1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结 1.4.…...

【Python】Python基础知识

【Python】Python基础知识 关键字 查看Python关键字&#xff1a; >python >>>import keyword >>>keyword.kwlist 注释 注释有两方面作用&#xff1a; &#xff08;1&#xff09;提高程序的可读性&#xff08;最重要的作用&#xff09;&#xff1b…...

【计算机视觉 05】YOLO论文讲解:V1-V7

https://ai.deepshare.net/live_pc/l_63243a65e4b050af23b79338 Part1.目标检测与YOLO系列 1. 目标检测任务及发展脉络 2. YOLO的发展史 Anchors Base原理&#xff1a; Part2.YOLOV1-V3 3. YOLO V1的网络结构 4. YOLO V3的网络结构与实验结果 Part3.YOLO的进化 5. YOLO V4的网络…...

git全局与单仓库的密码管理

概要 在使用git时&#xff0c;有默认的全局配置&#xff0c;每个仓库也有自己的配置&#xff0c;在使用时常常傻傻分不清楚&#xff0c;现在进行一个简单的整理记录。 一般情况下全局配置中的git账号和邮箱通常设置成自己的&#xff0c;其他仓库再根据项目需要进行单独配置&a…...

IDEA的使用(一) (IntelliJ IDEA 2022.1.3版本)

目录 1. IDEA项目结构 2. 模块的导入操作 2.1 正规操作 2.2 取巧操作 2.3 出现乱码 2.4 模块改名 3. 代码模板的使用 后缀补全&#xff08;Postfix Completion&#xff09;、实时模板&#xff08;Live Templates&#xff09;菜单里面什么介绍都有&#xff0c;可以自学&a…...

javaee SpringMVC文件上传 项目结构

引入依赖 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0…...

JavaScript DOM 函数大全详解(使用最新的 JS 语法)

JavaScript DOM 函数大全详解&#xff08;使用最新的 JS 语法&#xff09; JavaScript 的 Document Object Model&#xff08;DOM&#xff09;是用于操作网页内容的编程接口。在最新的 JavaScript 语法下&#xff0c;我们有很多方便和高效的方法来处理 DOM。下面是一些常用 DO…...

Stm32_标准库_8_ADC_光敏传感器_测量具体光照强度

ADC简介 测量方式 采用二分法比较数据 IO通道 ADC基本结构及配置路线 获取数字变量需要用到用到光敏电阻的AO口&#xff0c;AO端口接在PA0引脚即可 测得的模拟数据与实际光照强度之间的关系为 光照强度 100 - 模拟量 / 40;代码&#xff1a; 完整朴素代码&#xff1a; #in…...

基于SSM的固定资产管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

Leetcode---364场周赛

题目列表 2864. 最大二进制奇数 2865. 美丽塔 I 2866. 美丽塔 II 2867. 统计树中的合法路径数目 一、最大二进制奇数 这题只要你对二进制有了解(学编程的不会不了解二进制吧)&#xff0c;应该问题不大&#xff0c;这题要求最大奇数&#xff0c;1.奇数&#xff1a;只要保证…...

使用 Powershell 检索不理解的命令

使用 Powershell 检索不理解的命令 尝试使用 Powershell 完成 Powershell 的命令行 使用 Powershell 时&#xff0c;有时您会忘记某个 cmdlet 或想要了解哪些 cmdlet 可用。在这种情况下&#xff0c;最好在互联网上查找&#xff0c;但您也可以使用 Powershell 函数来完成。 以…...

Comsol 多裂纹水力压裂扩展:拉伸与压缩下的破坏探索

comsol多裂纹水力压裂扩展&#xff0c;可以实现拉伸和压缩下的破坏。在工程领域&#xff0c;水力压裂是一项至关重要的技术&#xff0c;尤其在石油和天然气开采等方面应用广泛。而 Comsol 作为强大的多物理场仿真软件&#xff0c;为我们研究多裂纹水力压裂扩展提供了有力工具&a…...

PPTist:5分钟掌握专业级在线PPT制作,免费开源的高效演示解决方案

PPTist&#xff1a;5分钟掌握专业级在线PPT制作&#xff0c;免费开源的高效演示解决方案 【免费下载链接】PPTist 基于 Vue3.x TypeScript 的在线演示文稿&#xff08;幻灯片&#xff09;应用&#xff0c;还原了大部分 Office PowerPoint 常用功能&#xff0c;实现在线PPT的编…...

WDMHDA:Windows 旧系统高清音频驱动的突破与挑战

【导语&#xff1a;WDMHDA 是一款适用于 Windows 98SE / ME 的高清音频驱动程序&#xff0c;为旧系统的音频功能带来新可能。但目前处于 Alpha 阶段&#xff0c;存在诸多待解决问题&#xff0c;其发展对旧系统音频生态有重要影响。】WDMHDA&#xff1a;旧系统音频驱动新选择WDM…...

双冗余链路实现(2/2期)

目录 拓扑&#xff1a; 基础需求&#xff1a; 出口路由器&#xff08;双路&#xff09;&#xff1a; 静态路由&#xff1a; 防火墙配置&#xff1a; 全区域互通透传&#xff1a; 静态路由&#xff1a; 冗余备份&#xff1a; 核心交换机&#xff1a; 静态路由&#xff…...

告别音乐平台干扰!铜钟音乐如何让你重拾纯净听歌体验?

告别音乐平台干扰&#xff01;铜钟音乐如何让你重拾纯净听歌体验&#xff1f; 【免费下载链接】tonzhon-music 铜钟 (Tonzhon.com): 免费听歌; 没有直播, 社交, 广告, 干扰; 简洁纯粹, 资源丰富, 体验独特&#xff01;(密码重置功能已回归) 项目地址: https://gitcode.com/Gi…...

163MusicLyrics:双平台歌词提取的终极解决方案

163MusicLyrics&#xff1a;双平台歌词提取的终极解决方案 【免费下载链接】163MusicLyrics Windows 云音乐歌词获取【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 你是否曾为寻找一首心爱歌曲的完整歌词而辗转多个平台&#xf…...

试盘Z之主力操盘线

试盘K&#xff0c;以满足特定条件后对该K线标注为试盘字样方便查看。同时通达对9日最低值与9日最高值进行EMA移动平均&#xff0c;得出主力操盘线&#xff01;试盘Z源码:X_1:REF(EMA((HLC)/3,9),1);X_2:EMA(HHV(HIGH,9),3);X_3:EMA(LLV(LOW,9),3);主力操盘线:EMA(X_1*2-X_3,5),…...

Pi0 Web演示服务监控:Prometheus+Grafana指标采集与告警配置

Pi0 Web演示服务监控&#xff1a;PrometheusGrafana指标采集与告警配置 1. 项目概述与监控需求 Pi0作为一个先进的视觉-语言-动作流机器人控制模型&#xff0c;其Web演示服务的稳定运行对于用户体验和开发测试至关重要。在生产环境中&#xff0c;我们需要实时掌握服务的运行状…...

CAN FD通信中,如何用AUTOSAR配置搞定TDC和SSP?一个80% Offset的实战案例

CAN FD通信中AUTOSAR配置实战&#xff1a;TDC与SSP的80% Offset实现 在汽车电子领域&#xff0c;CAN FD&#xff08;Controller Area Network Flexible Data-rate&#xff09;正逐步取代传统CAN总线&#xff0c;成为车载网络的主流选择。随着数据传输速率提升至2Mbps甚至更高&a…...

Cadence 17.4 ORCAD PSpice 保姆级教程:手把手教你搭建RC低通滤波器并验证效果

Cadence 17.4 ORCAD PSpice 从零到精通&#xff1a;RC低通滤波器实战全解析 在电子设计领域&#xff0c;仿真工具的重要性不言而喻。对于初学者而言&#xff0c;Cadence 17.4 ORCAD PSpice可能看起来界面复杂、功能繁多&#xff0c;让人望而生畏。但别担心&#xff0c;本文将从…...