前端将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>

最终效果

5741beb57d254a16b94618550e895c2f.png

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pip安装第三方库与设置

pip的使用 假如下载numpy pip install numpypypi 镜像源「配置」 常用镜像源列表 官方&#xff1a;https://pypi.org/simple 百度&#xff1a;https://mirror.baidu.com/pypi/simple/ 清华&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 阿里&#xff1a;https://m…

Mac软件删除方法?如何删除不会有残留

Mac电脑如果有太多无用的应用程序&#xff0c;很有可能会拖垮Mac系统的运行速度。因此&#xff0c;卸载电脑中无用的软件是优化Mac系统运行速度的最佳方式之一。Mac卸载应用程序的方式是和Windows有很大的区别&#xff0c;特别对于Mac新用户来说&#xff0c;如何无残留的卸载删…

【线性代数】矩阵求导的本质与分子布局、分母布局的本质(矩阵求导——本质篇)

矩阵求导的本质与分子布局、分母布局的本质&#xff08;矩阵求导——本质篇&#xff09; 说在前面一. 函数与标量、向量、矩阵二. 矩阵求导的本质三. 矩阵求导结果的布局四. 分子布局、分母布局的本质五. 向量变元的实值标量函数 说在前面 我将严谨地说明矩阵求导的本质与分子布…

MongoDB - 安装

一、Docker安装MongoDB 1. 安装 安装版本: 7.0.0 docker run -itd --name mongodb -v C:\\data\\mongodb\\data:/data/db -p 27017:27017 mongo:7.0.0 --auth-v: 将容器目录/data/db映射到本地C:\\data\\mongodb\\data目录&#xff0c;防止容器删除数据丢失-p: 端口映射--aut…

Linux系统下建立Socket聊天服务器

目录 1.服务器结构 2.各模块函数 2.1 socket函数 2.2 bind函数 2.3 Listen函数 2.4 accept函数 2.5 接收发送函数 2.6 close函数 2.7 connect函数 3 代码段 3.1 服务器代码 1.服务器结构 使用socket的API函数编写服务端和客户端程序的步骤图示: 2.各模块函数 服务…

TensorFlow 的基本概念和使用场景介绍

文章目录 一、TensorFlow基本概念1. 张量&#xff08;Tensor&#xff09;2. 计算图&#xff08;Computation Graph&#xff09;3. 会话&#xff08;Session&#xff09; 二、TensorFlow使用场景1. 机器学习&#xff08;Machine Learning&#xff09;2. 计算机视觉&#xff08;C…

阿晨的运维笔记 | CentOS部署Docker

使用yum安装 # step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 # Step 2: 添加软件源信息 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo # Step 3: 更新并安装 …

DVWA靶场搭建

目录 配置环境&#xff1a; 1、将下载好的压缩包放置php的WWW根目录下 2、改文件配置 3、查看mysql用户名和密码&#xff0c;将其修改值靶场配置文件中 4、完成后我们就可以在浏览器输入127.0.0.1/dvwa进入靶场 测试XSS注入&#xff1a; 配置环境&#xff1a; githhub下…

《CTFshow-Web入门》09. Web 81~90

Web 入门 索引web81题解 web82题解原理 web83题解 web84题解 web85题解 web86题解 web87题解原理 web88题解 web89题解 web90题解 ctf - web入门 索引 web81&#xff1a;include() 利用&#xff0c;一句话木马之 Nginx 日志利用。web82~86&#xff1a;include() 利用&#xff…

Java“牵手”京东店铺所有商品API接口数据,通过店铺ID获取整店商品详情数据,京东店铺所有商品API申请指南

京东平台店铺所有商品数据接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取京东整店的商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片、价格信息等详细信息 。 获取店铺所有商品接口API是一种用于获取电商平台上商品详…

Java中网络的基本介绍。网络通信,网络,ip地址,域名,端口,网络通信协议,TCP/IP传输过程,网络通信协议模型,TCP协议,UDP协议

- 网络通信 概念&#xff1a;网络通信是指通过计算机网络进行信息传输的过程&#xff0c;包括数据传输、语音通话、视频会议等。在网络通信中&#xff0c;数据被分成一系列的数据包&#xff0c;并通过网络传输到目的地。在数据传输过程中&#xff0c;需要确保数据的完整性、准…

机器人编程怎么入门?

机器人已经在我们中间存在了二三十年。如今&#xff0c;机器人在我们的文化中比以往任何时候都更加根深蒂固。大多数机器人机器用于各种装配线&#xff0c;或在世界各地的矿山或工业设施中执行密集的物理操作。 还有一些家用机器人&#xff0c;工程师正在对机器人进行编程&…

表白墙程序

目录 一、页面代码部分 二、设计程序 二、实现 doPost​编辑 三、实现 doGet 四、前端代码部分 五、使用数据库存储数据 一、页面代码部分 在之前的一篇博客中&#xff0c;已经写过了表白墙的页面代码实现&#xff0c;这里就不再重复了 页面代码如下&#xff1a; <!…

【计算机组成 课程笔记】1.2 冯·诺伊曼结构

课程链接&#xff1a; 计算机组成_北京大学_中国大学MOOC(慕课) 1 - 2 - 102-冯诺依曼结构的要点&#xff08;13-59--&#xff09;_哔哩哔哩_bilibili 现代的计算机形态各异&#xff0c;但究其本质&#xff0c;几乎全部采用了冯诺依曼结构。要了解计算机&#xff0c;首先要知道…

华为数通方向HCIP-DataCom H12-821题库(拖拽题,知识点总结)

以下是我在现有题库中整理的需要重点关注的考点内容,如有遗漏小伙伴可以留言补充。

【仿牛客论坛java项目】第五章 Kafka,构建TB级异步消息系统:阻塞队列、Kafka入门、Spring整合Kafka、发送系统通知、显示系统通知

这里写自定义目录标题 一、阻塞队列简单的阻塞队列测试案例总结阻塞队列 二、Kafka入门1、基础知识Kafka术语消息队列实现方式两种 2、配置3、启动全部命令启动 zookeeper 服务器再启动 kafka 服务器创建Topic关闭 4、总结Kafka的特点Kafka的术语 三、 Spring整合Kafka导入依赖…

R语言绘图相关函数(含实例)

目录 plot:可用于创建多种类型的图形 dev.new():新建画板 hist&#xff1a;绘制直方图 dotchart&#xff1a;绘制点图的函数 pie:绘制饼图 pair&#xff1a;绘制散点图矩阵 boxplot&#xff1a;绘制箱线图 scatterplot3D&#xff1a; 绘制三维散点图 par&#xff1a;修…

CTFhub-文件上传-前端验证

burp 抓包 --> 重发--> 查看源代码 用 GodZilla 生成木马 文件名为 1.php.jsp 上传-->抓包-->改包 (删掉 .jpg) --> 点击 放行 木马文件位置为&#xff1a;http://challenge-f0531d0c27641130.sandbox.ctfhub.com:10800/upload/1.php 用 蚁剑连接 ctfhub{4743b…

【Go 基础篇】Go语言结构体实例的创建详解

在Go语言中&#xff0c;结构体是一种强大的数据类型&#xff0c;允许我们定义自己的复杂数据结构。通过结构体&#xff0c;我们可以将不同类型的数据字段组合成一个单一的实例&#xff0c;从而更好地组织和管理数据。然而&#xff0c;在创建结构体实例时&#xff0c;有一些注意…

百度抓取香港服务器抓取超时是什么情况?

​ 网络延迟导致抓取超时 网络延迟是指从发送请求到接收响应之间的时间延迟。如果网络延迟过高&#xff0c;服务器可能无法及时响应请求&#xff0c;导致超时。在香港服务器上抓取数据时&#xff0c;如果网络延迟过高&#xff0c;可能会出现抓取超时的情况。 服务器负载过高可能…