使用 uni-app 开发项目,日期和时间如何格式化?

功能需求描述

在开发项目时,往往需要对从后端查询到的时间进行格式化,查到的时间格式一般都是时间戳,一堆数字,这时候怎么转化成类似于 2023年8月15日 08:12:10 这样的格式?

在组件显示格式化后的日期

其实 uni-app 的官方拓展组件 uni-dateformat 就能实现这个需求,具体用法是:

<!-- 显示为中文时间格式 -->
<uni-dateformat :date="timestamp"></uni-dateformat>

date 属性可以接受时间戳、js 时间对象或者是时间字符串,非常灵活。而 format 属性则可以设置时间显示格式。

另外如果时间和现在很接近,默认会显示为“刚刚”、“5分钟前”等文字,这是比较友好的时间显示方式,如果只希望显示为时间,可以通过 threshold 属性:

<!-- 不显示刚刚/马上/xx分钟前,以及自定义年月日 -->
<uni-dateformat :date="timestamp" :threshold="[0,0]" format="yyyy年MM月dd日 hh:mm:ss"></uni-dateformat>

上面的代码例子是在 <template> 中使用组件的方式来格式化时间,这个组件很强大,还有很多种用法,可以去阅读官方组件文档。

在 js 中格式化时间日期

有时候我们需要在 js 中来格式化时间,其实也是可以的,这个用法在官方组件文档里没有说明,是我看了组件的源码发现的,就是在 js 引入 uni-dateformat 组件下的 data-format.js,这个模块导出了一个用来格式化时间的方法,详细的用法可以看这篇《uni-app 日期和时间格式化》。

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

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

相关文章

【RtpSeqNumOnlyRefFinder】webrtc m98: ManageFrameInternal 的帧决策过程分析

Jitterbuffer(FrameBuffer)需要组帧以后GOP内的参考关系 JeffreyLau 大神分析 了组帧原理而参考关系(RtpFrameReferenceFinder)的生成伴随了帧决策 FrameDecisionFrameDecision 影响力 帧的缓存。调用 OnAssembledFrame 传递已经拿到的RtpFrameObject 那么,RtpFrameObject…

安全性在外卖系统开发中的重要性

外卖系统的开发需要强调安全性&#xff0c;因为系统中涉及用户的个人信息、支付信息以及交易数据。确保这些信息的安全对于用户信任和系统的成功至关重要。以下是在外卖系统开发中提升安全性的一些建议。 数据加密 用户信息和支付数据应该经过加密处理。对于敏感信息&#x…

计算机的主存储器与辅助存储器

文章目录 前言一、主存储器&#xff08;内存&#xff09;1.主存储器特征2.主存储器构成3.主存储器和CPU如何交互4.主存储器和操作系统位数的关系 二、辅助存储器&#xff08;磁盘&#xff09;1.辅助存储器构成2.辅助存储器特征3.磁盘的调度算法3.1先来先服务算法3.2最短寻道时间…

错误:ERROR Cannot read properties of null (reading ‘type‘)

ERROR Cannot read properties of null (reading ‘type’) TypeError: Cannot read properties of null (reading ‘type’) <template><el-card><el-row :gutter"20" class"header"><el-col :span"7"><el-input pl…

ROS自学笔记二十九:如何从SolidWorks导出URDF文件

SolidWorks是一款三维计算机辅助设计&#xff08;CAD&#xff09;软件&#xff0c;用于创建三维模型。要将SolidWorks模型导出为URDF&#xff08;Unified Robot Description Format&#xff09;文件&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. 安装SolidWorks URD…

大厂面试题-innoDB如何解决幻读

从三个方面来回答&#xff1a; 1、Mysql的事务隔离级别 Mysql有四种事务隔离级别&#xff0c;这四种隔离级别代表当存在多个事务并发冲突时&#xff0c;可能出现的脏读、不可重复读、幻读的问题。 其中InnoDB在RR的隔离级别下&#xff0c;解决了幻读的问题。 2、什么是幻读&…

Java前后端分离的在线考试系统源码

Java前后端分离的在线考试系统源码 技术栈 1&#xff0c;SpringBoot 2&#xff0c;Mybatis-plus 3&#xff0c;MySQL 5.7 4&#xff0c;Vue全家桶 5&#xff0c;ElementUI 6&#xff0c;Redis 7&#xff0c;Swagger 8&#xff0c;阿里云OSS 9&#xff0c;Log4j 考…

2023 electron最新最简版windows、mac打包、自动升级详解

这里我将讲解一下从0搭建一个electron最简版架子&#xff0c;以及如何实现打包自动化更新 之前我有写过两篇文章关于electron框架概述以及 常用api的使用&#xff0c;感兴趣的同学可以看看 Electron桌面应用开发 Electron桌面应用开发2 搭建electron 官方文档&#xff1a;ht…

Temu新规定强制要求卖家上传英代、欧代信息——站斧浏览器

根据官方消息&#xff1a;自10月15日起&#xff0c;Temu要求所有在欧洲站点销售的电子产品包装标识上都要加上英代和欧代信息&#xff0c;否则产品可能会被拒收。因此&#xff0c;欧洲站的卖家要抓紧时间完成欧代、英代合规&#xff0c;以免造成损失。 同时&#xff0c;近日Tem…

uboot启动linux kernel的流程

目录 前言流程图autoboot_commandrun_command_listdo_bootmdo_bootm_statesdo_bootm_linuxboot_prep_linuxboot_jump_linux 前言 本文在u-boot启动流程分析这篇文章的基础上&#xff0c;简要梳理uboot启动linux kernel的流程。 流程图 其中&#xff0c; autoboot_command位于…

苹果Mac电脑fcpx视频剪辑:Final Cut Pro中文最新 for mac

Final Cut Pro是苹果公司开发的一款专业视频剪辑软件&#xff0c;它为原生64位软件&#xff0c;基于Cocoa编写&#xff0c;支持多路多核心处理器&#xff0c;支持GPU加速&#xff0c;支持后台渲染。Final Cut Pro在Mac OS平台上运行&#xff0c;适用于进行后期制作。 Final Cu…

pngquant failed to build, make sure that libpng-dev is installed 问题

第一个参考方案失败 &#xff1a;npm install -g windows-build-tools4.0.0 安装失败&#xff0c;提示 依赖不在支持 第二个方案&#xff0c;降低node 版本 失败 第三种方案&#xff0c;成功 先执行&#xff0c;下面两行代码&#xff0c;再按照依赖 npm install imagemin-pn…

RACI model介绍

0 Preface/Foreword 一种专案管理和组织改造的模型。是一种责任分配模型。 1 介绍 RACI &#xff1a; Responsible&#xff08;谁执行&#xff09;: Those who do the work to complete the taskAccountable&#xff08;谁负责&#xff0c;谁批准&#xff09;: The one ul…

应用场景 | 中小河流治理监测系统,提升流域智能感知能力

当前&#xff0c;受全球气候变化和人类活动影响&#xff0c;我国中小河流洪涝灾害呈多发、频发趋势&#xff0c;中小河流洪水已成为严重威胁人民群众生命财产安全的重大风险隐患。中小河流治理作为一项重要的民生水利任务&#xff0c;近十年来国家不断加大以防洪为主的治理投入…

预处理、编译、汇编、链接

1.预处理 宏替换去注释引入头文件 2.编译 3.汇编 4.链接 gcc 基于C/C的编译器 补充说明 gcc命令 使用GNU推出的基于C/C的编译器&#xff0c;是开放源代码领域应用最广泛的编译器&#xff0c;具有功能强大&#xff0c;编译代码支持性能优化等特点。现在很多程序员都应用…

2023数学建模国赛C题赛后总结

今天国赛的成绩终于出来了&#xff0c;盼星星盼月亮的。之前面试的时候已经把我给推到国奖评委那里去了&#xff0c;可是好可惜&#xff0c;最终以很微小的劣势错失国二。只拿到了广西区的省一。我心里还是很遗憾的&#xff0c;我真的为此准备了很久&#xff0c;虽然当中也有着…

C 怎么用c语言的函数指针实现封装、继承和多态

文章目录 封装继承多态 封装 封装是把一个抽象的事物的属性以及对应的操作打包到一个类中&#xff0c;通过内部的方法来改变内部的状态&#xff0c;封装的本质是在隐藏信息&#xff0c;使得对象内部的状态不轻易被外界访问和利用。 但是c语言没有类的概念&#xff0c;c语言实…

axios和Ajax

1.axios 官网&#xff1a;https://axios-http.com/zh/ CDN&#xff1a;https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js axios是一个请求库&#xff0c;在浏览器环境中&#xff0c;它封装了XHR&#xff0c;提供更加便捷的API发送请求 基本使用 // 发送 get 请求…

如何对非线性【SVM】进行三维可视化

首先导入相应的模块&#xff0c; from sklearn.datasets import make_blobs from sklearn.svm import SVC import matplotlib.pyplot as plt import numpy as np 我们使用make_circles()函数创建散点图&#xff0c;并将散点图中的点的横纵坐标赋值给x,y&#xff0c;其中x是特…

golang工程中间件——redis常用结构及应用(string, hash, list)

Redis 命令中心 【golang工程中间件——redisxxxxx】这些篇文章专门以应用为主&#xff0c;原理性的后续博主复习到的时候再详细阐述 string结构以及应用 字符数组&#xff0c;redis字符串是二进制安全字符串&#xff0c;可以存储图片等二进制数据&#xff0c;同时也可以存…