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

 

 

 

 

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

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

相关文章

iOS - 资源按需加载 - ODR

一、瘦身技术大图 二、On-Demand Resources 简介 将其保存管理在苹果的服务器&#xff0c;按需使用资源、优化包体积&#xff0c;实现更小的应用程序。ODR 的好处&#xff1a; 应用体积更小&#xff0c;下载更快&#xff0c;提升初次启动速度资源会在后台下载操作系统将会在磁…

Linux 进程控制

进程创建 fork() 在linux中fork函数时非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程 进程调用fork&#xff0c;当控制转移到内核中的fork代码时&#xff0c;内核完成以下工作&#xff1a; 分配新的内存块和内核数据…

华为OD:敏感字段加密

题目描述&#xff1a; 给定一个由多个命令字组成的命令字符串&#xff1a; 1、字符串长度小于等于127字节,只包含大小写字母,数字,下划线和偶数个双引号&#xff1b; 2、命令字之间以一个或多个下划线_进行分割&#xff1b; 3、可以通过两个双引号”"来标识包含下划线…

koa使用Sequelize:定义数据结构

创建连接 const { Sequelize } require(sequelize);// 第一个参数&#xff1a;连接的数据库名 // 第二个参数&#xff1a;数据库的用户名 // 第三个参数&#xff1a;数据库的密码 const mysql new Sequelize(mytest, root, root, {dialect: mysql, // 这里可以改成任意…

MySQL-数据类型

MySQL-数据类型 数值类型bittinyintfloatdecimal 字符串和文本类型charvarcharblobtext 日期和时间类型enum-枚举类型set-集合类型 数值类型 数据类型说明bit(M)位类型。M指定位数&#xff0c;默认值为1&#xff0c;范围1-64.tinyint [unsigned]带符号范围:-128 - 127&#xf…

解决 filezilla 连接服务器失败问题

问题描述&#xff1a; 开始一直用的 XFTP 后来&#xff0c;它变成收费软件了&#xff0c;所以使用filezilla 代替 XFTP 之前用的还好好的&#xff0c;今天突然就报错了&#xff1a;按要求输入相关字段&#xff0c;连接 连接失败&#xff01;&#xff01;&#xff01;o(╥﹏╥…

el-table 单击某一行,该行的前面的多选框显示已勾选

目 录 官网&#xff1a; 1. 单页面 2. table是组件 案例&#xff1a; 官网&#xff1a; 1. 单页面 通过单击获取当前行的数据&#xff0c;然后传给选中显示勾选的方法。 <template><el-tableref"multipleTable":data"tableData"tooltip-eff…

postgresql并行查询(高级特性)

######################## 并行查询 postgresql和Oracle一样支持并行查询的,比如select、update、delete大事无开启并行功能后,能够利用多核cpu,从而充分发挥硬件性能,提升大事物的处理效率。 pg在9.6的版本之前是不支持的并行查询的,从9.6开始支持并行查询,但是功能非常…

Windows docker desktop 基于HyperV的镜像文件迁移到D盘

Docker desktop的HyperV镜像文件&#xff0c;默认是在C盘下 C:\ProgramData\DockerDesktop\vm-data\DockerDesktop.vhdx如果部署的软件较多&#xff0c;文件较大&#xff0c;或者产生日志&#xff0c;甚至数据等&#xff0c;这将会使此文件越来越大&#xff0c;容易导致C盘空间…

QT 设置应用程序图标

1.下载xx.ico图标&#xff1a;ico网址 2.在线PNG转换ICO&#xff1a;png在线转换ico 3.添加图标资源 1&#xff09;新建文件路径 2&#xff09;添加图片资源 3&#xff09;在 .pro文件里面添加图片 4&#xff09;将xx.ico放到工程目录&#xff0c;编译完可以看到xx.exe的图标…

Go几种读取配置文件的方式

比较有名的方案有 使用viper管理配置[1] 支持多种配置文件格式&#xff0c;包括 JSON,TOML,YAML,HECL,envfile&#xff0c;甚至还包括Java properties 支持为配置项设置默认值 可以通过命令行参数覆盖指定的配置项 支持参数别名 viper[2]按照这个优先级&#xff08;从高到低&am…

学生宿舍水电费自动缴费系统/基于javaweb的水电缴费系统

摘 要 “互联网”的战略实施后&#xff0c;很多行业的信息化水平都有了很大的提升。但是目前很多学校日常工作仍是通过人工管理的方式进行&#xff0c;需要在各个岗位投入大量的人力进行很多重复性工作&#xff0c;这样就浪费了许多的人力物力&#xff0c;工作效率较低&#x…