前端将UTC时间格式转化为本地时间格式-uniapp写法

UTC时间格式是什么

首先我们先简单的了解一下:UTC时间(协调世界时,Coordinated Universal Time)使用24小时制,以小时、分钟、秒和毫秒来表示时间

HH:mm:ss.SSS
  • HH 表示小时,取值范围为00到23。
  • mm 表示分钟,取值范围为00到59。
  • ss 表示秒,取值范围为00到59。
  • SSS 表示毫秒,取值范围为000到999。

需要注意的是,UTC时间不考虑夏令时或时区的影响,因此它是一种标准的时间表示方法,不会受到地理位置的变化而改变。

如何转化呢?

我们先随便准备一组数据,能用就行哈

假设下方的数据就是我们冲接口中获取到的

				list: [{"id": 20,"goods_id": 20,"task_id": null,"deduct_num": 120,"integral_num": null,"type": 2,"created_at": "2023-08-31T02:56:02.000000Z"},{"id": 19,"goods_id": 29,"task_id": null,"deduct_num": 60,"integral_num": null,"type": 2,"created_at": "2023-08-31T02:55:44.000000Z"},{"id": 18,"goods_id": 12,"task_id": null,"deduct_num": 60,"integral_num": null,"type": 2,"created_at": "2023-08-31T02:41:32.000000Z"},{"id": 17,"goods_id": 9,"task_id": null,"deduct_num": 220,"integral_num": null,"type": 2,"created_at": "2023-08-31T02:23:40.000000Z"},{"id": 16,"goods_id": 25,"task_id": null,"deduct_num": 40,"integral_num": null,"type": 2,"created_at": "2023-08-31T02:18:09.000000Z"},{"id": 15,"goods_id": 30,"task_id": null,"deduct_num": 160,"integral_num": null,"type": 2,"created_at": "2023-08-31T01:15:15.000000Z"}],

使用v-for指令遍历list数组,然后调用convertUTCtoLocal方法将每个对象的created_at字段从UTC时间格式转换为本地时间格式。最终,显示本地时间在界面上。

记得在实际应用中,确保你的时间数据以正确的格式和类型存在,并且适当地处理可能的错误情况

  convertUTCtoLocal(utcTime) {const utcDate = new Date(utcTime);const localDate = new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);return localDate.toLocaleString();}

页面渲染部分

  <ul><li v-for="(item, index) in list" :key="index"><p>ID: {{ item.id }}</p><p>本地时间: {{ convertUTCtoLocal(item.created_at) }}</p></li></ul>

最终效果

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

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

相关文章

Python股票交易---均值回归

免责声明&#xff1a;本文提供的信息仅用于教育目的&#xff0c;不应被视为专业投资建议。在做出投资决策时进行自己的研究并谨慎行事非常重要。投资涉及风险&#xff0c;您做出的任何投资决定完全由您自己负责。 在本文中&#xff0c;您将了解什么是均值回归交易算法&#xff…

⛳ 面试题-单例模式会存在线程安全问题吗?

&#x1f38d;目录 ⛳ 面试题-单例模式会存在线程安全问题吗&#xff1f;&#x1f3a8; 一、单例模式-简介&#x1f69c; 二、饿汉式&#x1f43e; 三、懒汉式&#x1f3af; 3.1、懒汉式&#xff1a;在调用 getInstance 的时候才创建对象。&#xff08;线程不安全&#xff09;&…

金额格式化,三位数逗号分隔,小数点后保留两位(vue金额过滤器)

金额格式化&#xff1a;三位数逗号分隔&#xff0c;小数点后保留两位 <script> // 金额格式化&#xff1a;三位数逗号分隔&#xff0c;小数点后保留两位 const payFilter (e) > {const pay parseFloat(e).toFixed(2).replace(/(\d)(?(\d{3})\.)/g, $1,)return pay…

ChatGPT癌症治疗“困难重重”,真假混讲难辨真假,准确有待提高

近年来&#xff0c;人工智能在医疗领域的应用逐渐增多&#xff0c;其中自然语言处理模型如ChatGPT在提供医疗建议和信息方面引起了广泛关注。然而&#xff0c;最新的研究表明&#xff0c;尽管ChatGPT在许多领域取得了成功&#xff0c;但它在癌症治疗方案上的准确性仍有待提高。…

leetcode 392. 判断子序列

2023.8.25 本题要判断子序列&#xff0c;可以使用动态规划来做&#xff0c;定义一个二维dp数组。 接下来就是常规的动态规划求解子序列的过程。 给出两种定义dp数组的方法。 二维bool型dp数组&#xff1a; class Solution { public:bool isSubsequence(string s, string t) …

在云原生环境中构建可扩展的大数据平台:方法和策略

文章目录 1. **选择适当的云提供商&#xff1a;**2. **采用容器化和微服务架构&#xff1a;**3. **分层架构设计&#xff1a;**4. **弹性计算资源&#xff1a;**5. **使用分布式计算框架&#xff1a;**6. **数据分区和分片&#xff1a;**7. **使用列式存储&#xff1a;**8. **缓…

qt day 1

this->setWindowIcon(QIcon("D:\\zhuomian\\wodepeizhenshi.png"));//設置窗口的iconthis->setWindowTitle("鵬哥快聊");//更改名字this->setFixedSize(500,400);//設置尺寸QLabel *qlnew QLabel(this);//創建一個標簽ql->resize(QSize(500,20…

【计算机视觉|生成对抗】用于高保真自然图像合成的大规模GAN训练用于高保真自然图像合成的大规模GAN训练(BigGAN)

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Large Scale GAN Training for High Fidelity Natural Image Synthesis 链接&#xff1a;[1809.11096] Large Scale GAN Training for High Fidelity Natural Image Synthesis (arxiv.org…

Java 的VO、DTO、TO、BO等概念总结

当涉及到Java中的数据传输和对象封装时&#xff0c;有几个常见的概念&#xff0c;它们在不同的上下文中具有不同的用途。以下是这些概念的总结&#xff1a; VO&#xff08;Value Object&#xff09;&#xff1a; 含义&#xff1a;VO表示值对象&#xff0c;用于封装一组相关的数…

Rabbitmq消息积压问题如何解决以及如何进行限流

一、增加处理能力 优化系统架构、增加服务器资源、采用负载均衡等手段&#xff0c;以提高系统的处理能力和并发处理能力。通过增加服务器数量或者优化代码&#xff0c;确保系统能够及时处理所有的消息。 二、异步处理 将消息的处理过程设计为异步执行&#xff0c;即接收到消息…

基于机器学习的fNIRS信号质量控制方法

摘要 尽管功能性近红外光谱(fNIRS)在神经系统研究中的应用越来越广泛&#xff0c;但fNIRS信号处理仍未标准化&#xff0c;并且受到经验和手动操作的高度影响。在任何信号处理过程的开始阶段&#xff0c;信号质量控制(SQC)对于防止错误和不可靠结果至关重要。在fNIRS分析中&…

时间字符串对比

目录 需求场景 解决方案 Date对象方法 Moment.js库 Day.js库 简便方法 需求场景 在开发中&#xff0c;经常需要对比两个时间的先后顺序&#xff0c;或者计算两个时间之间的时间差。 例如&#xff1a; 在电商网站中&#xff0c;需要显示商品的上架时间和下架时间&#x…

软件工程(十一) 系统设计分类

我们知道需求规格说明书(SRS)落地之后, 就要开始着手系统设计了,看一下这个系统该如何来设计,并且如何实现。学习系统设计之前,需要先了解系统设计有哪些分类。 系统设计的分类如下 界面设计结构化设计面向对象设计(最重要)1、界面设计 界面设计也叫做人机界面设计,属于…

swift APP缓存

这里的APP缓存是指Cache文件夹里的内容&#xff0c;iOS系统从iOS 10开始就支持系统自动清理功能了。 建议重要的内容不要放到 Cache文件夹中。 一、获取缓存 /// 获取缓存大小public static func getCacheSize() -> String {let folderPath NSSearchPathForDirectoriesIn…

FreeSWITCH 1.10.10 简单图形化界面5 - 使用百度TTS

FreeSWITCH 1.10.10 简单图形化界面5 - 使用百度TTS 0、 界面预览1、注册百度AI开放平台&#xff0c;开通语音识别服务2、获取AppID/API Key/Secret Key3、 安装百度语音合成sdk4、合成代码5、在PBX中使用百度TTS6、音乐文件-TTS7、拨号规则-tts_command 0、 界面预览 http://…

SSM商城项目实战:订单管理

SSM商城项目实战&#xff1a;订单管理 在SSM商城项目中&#xff0c;订单管理是一个非常重要的功能模块。本文将详细介绍订单管理的实现思路和步骤代码。 实现SSM商城项目中订单管理功能的思路如下&#xff1a; 设计数据库表结构&#xff1a;根据订单管理的需求&#xff0c;设计…

网络有源号角(50W-100W)社区小区广播 工地语音播报,隧道广播,钢铁广播广播系统

网络有源号角&#xff08;50W-100W&#xff09;社区小区广播 工地语音播报&#xff0c;隧道广播&#xff0c;钢铁广播广播系统 SV-7042T 50W网络有源号角 SV-7042T是深圳锐科达电子有限公司的一款壁挂式网络有源号角&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音…

ceph源码阅读 erasure-code

1、ceph纠删码 纠删码(Erasure Code)是比较流行的数据冗余的存储方法&#xff0c;将原始数据分成k个数据块(data chunk)&#xff0c;通过k个数据块计算出m个校验块(coding chunk)。把nkm个数据块保存在不同的节点&#xff0c;通过n中的任意k个块还原出原始数据。EC包含编码和解…

解密Spring MVC异常处理:从局部到全局,打造稳固系统的关键步骤

&#x1f600;前言 在现代软件开发中&#xff0c;异常处理是不可或缺的一部分&#xff0c;它能够有效地提高系统的稳定性和健壮性。在Spring MVC框架中&#xff0c;异常处理机制起着至关重要的作用&#xff0c;它允许开发者在程序运行过程中捕获、处理和报告异常&#xff0c;从…

Qt/C++编写视频监控系统80-远程回放视频流

一、前言 远程回放NVR或者服务器上的视频文件&#xff0c;一般有三种方式&#xff0c;第一种是调用厂家的SDK&#xff0c;这个功能最全&#xff0c;但是缺点明显就是每个厂家的设备都有自己的SDK&#xff0c;只兼容自家的设备&#xff0c;如果你的软件需要接入多个厂家的&…