uniapp 格式化时间刚刚,几分钟前,几小时前,几天前…

效果如图:

根目录下新建utils文件夹,文件夹下新增js文件,文件内容:

export const filters = {dateTimeSub(data) {if (data == undefined) {return;}// 传进来的data必须是日期格式,不能是时间戳//将字符串转换成时间格式var timePublish = new Date(data);var timeNow = new Date();var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var month = day * 30;var result = "";var diffValue = timeNow - timePublish;  //时间差var diffMonth = diffValue / month;      //月差var diffWeek = diffValue / (7 * day);   //周差var diffDay = diffValue / day;          //天差var diffHour = diffValue / hour;        //时差var diffMinute = diffValue / minute;    //分差if (diffValue < 0) {console.log("错误时间");} else if (diffMonth > 3) {// result = timePublish.getFullYear() + "-";// result += timePublish.getMonth() + "-";// result += timePublish.getDate();// console.log(result);} else if (diffMonth > 1) {// result = parseInt(diffMonth) + "月前";} else if (diffWeek > 1) {// result = parseInt(diffWeek) + "周前";} else if (diffDay > 3) {let y = timePublish.getFullYear();let MM = timePublish.getMonth() + 1;MM = MM < 10 ? ('0' + MM) : MM; //月补0let d = timePublish.getDate();d = d < 10 ? ('0' + d) : d; //天补0result = y + '-' + MM + '-' + d;} else if (diffDay>=1 && diffDay <= 3) {result = parseInt(diffDay) + "天前";} else if (diffHour > 1) {result = parseInt(diffHour) + "小时前";} else if (diffMinute > 1) {result = parseInt(diffMinute) + "分钟前";} else {result = "刚刚";}return result;},formatDate(value) {if (value == undefined) {return;}// #ifdef APP-PLUSif(plus.os.name == 'iOS') {time = time.replaceAll("-", "/")}// #endif// let date = new Date(value * 1000);let date = new Date(value);//时间戳为10位需*1000,时间戳为13位的话不需乘1000let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? ('0' + MM) : MM; //月补0let d = date.getDate();d = d < 10 ? ('0' + d) : d; //天补0let h = date.getHours();h = h < 10 ? ('0' + h) : h; //小时补0let m = date.getMinutes();m = m < 10 ? ('0' + m) : m; //分钟补0let s = date.getSeconds();s = s < 10 ? ('0' + s) : s; //秒补0return y + '-' + MM + '-' + d; //年月日// return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒},formatTime(value) {if (value == undefined) {return;}// #ifdef APP-PLUSif(plus.os.name == 'iOS') {time = time.replaceAll("-", "/")}// #endiflet date = new Date(value);let MM = date.getMonth() + 1;MM = MM < 10 ? ('0' + MM) : MM; //月补0let d = date.getDate();d = d < 10 ? ('0' + d) : d; //天补0return  MM + '月' + d + '日'; //年月日}
}

 main.js中引入

import Vue from 'vue'Vue.config.productionTip = falseimport { filters } from './utils/time_day.js'
// 定义全局自定义过滤器
Object.keys(filters).forEach(key => {Vue.filter(key, filters[key])
})

页面中使用即可

<view class="times">{{item.updatetime | getDateDiff}}</view>

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

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

相关文章

Vue3使用wangEditor

那么这一节我们在编辑公司信息的弹窗中使用富文本插件wangEditor官网 Vue3使用wangEditor 安装wangEditor在弹窗中引入wangEditor结构api接口部分editor组件script部分怎么去修改富文本的编辑器&#xff1f; 案例内效果&#xff1a; 安装wangEditor npm install wangeditor/…

RabbitMQ学习——发布订阅/fanout模式 topic模式 rabbitmq回调确认 延迟队列(死信)设计

目录 引出点对点(simple)Work queues 一对多发布订阅/fanout模式以登陆验证码为例pom文件导包application.yml文件rabbitmq的配置生产者生成验证码&#xff0c;发送给交换机消费者消费验证码 topic模式配置类增加配置生产者发送信息进行发送控制台查看 rabbitmq回调确认配置类验…

MySQL 存储过程、函数、触发器、事件

​ 目录 存储过程 创建存储过程 调用存储过程 查看存储过程 删除存储过程 进阶 变量 if条件判断 传递参数 case结构 while循环 repeat结构 loop语句 leave语句 游标/光标 存储函数 触发器 创建触发器 删除触发器 查看触发器 事件 查看事件调度器是否开启…

大模型在金融医疗、生命系统和物理仿真领域的创新应用探索

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 在当今迅速发展的科技领域&#xff0c;大模型技术正日益成为金融医疗、生命系统和物理仿真等领域中的重要工具。2023年6月16日&#xff0c;AI TIME举办的青年科学家大模型专场活动邀请了国防科技大学理学院数学…

[系统安全] 五十二.DataCon竞赛 (1)2020年Coremail钓鱼邮件识别及分类详解

您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列。因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全、逆向分析和恶意代码检测,“系统安全”系列文章会更加聚焦,更加系…

易服客工作室:7个优质WordPress LMS线上教育系统插件比较(优点和缺点)

您是否正在为您的 WordPress 网站寻找最好的 LMS 插件&#xff1f;在线学习管理系统 (LMS) 插件允许您使用 WordPress 创建和运行类似 Udemy 的在线课程。 一个完美的 WordPress LMS 插件包括管理在线课程内容、处理订阅、运行和评分测验、接受付款等功能。 在本文中&#xf…

docker的服务/容器缺少vim问题

背景/问题&#xff1a; docker的服务/容器缺少vim问题 在docker的mysql服务中安装Vim 1、执行apt-get update root6d8d17e320a0:/# apt-get update问题:文件下载失败 Err:1 http://security.debian.org/debian-security buster/updates InRelease Temporary failure resolv…

Hugging Face 的文本生成和大语言模型的开源生态

[更新于 2023 年 7 月 23 日: 添加 Llama 2。] 文本生成和对话技术已经出现多年了。早期的挑战在于通过设置参数和分辨偏差&#xff0c;同时控制好文本忠实性和多样性。更忠实的输出一般更缺少创造性&#xff0c;并且和原始训练数据更加接近&#xff0c;也更不像人话。最近的研…

python函数的传参

一、关键字参数 定义一个接受关键字参数的函数 def test_arg(**kargs):for key in kargs:print(f{key}{kargs[key]}) 这里的kargs是一个字典&#xff0c;但传入的参数是 **kargs, 而非 kargs. 可以试试&#xff1a; test_arg(A30,B"Chinese") 但你直接传入一个字…

Kali Hyper-V安装正常启动后 黑屏 只能进命令模式

问题: Hyper-V安装虚拟机Kali系统一切安装正常, 没有出现错误. 安装成功后重启,只能进入命令模式,tt1-tt6,进不去GUI桌面. 尝试: 一代二代虚拟硬盘都试过,同样问题,只能开进后进入命令模式,在命令模式下一切运行正常, 也修复过系统 GNOM等的,不管用. 以下为国外论坛给的建议,尝…

Cocos Creator 3.8 后期效果 Shader 编写(2/2) 进阶篇

前言 在上一篇文章中&#xff0c;麒麟子给大家分享了如何在 Cocos Creator 3.8 中的自定义管线中&#xff0c;添加属于自己的后期效果 Shader。 但基于 BlitScreen 的方案&#xff0c;我们只能编写最简单后效 Shader&#xff0c;如果我们想要支持更多复杂的 Shader&#xff0c…

Gitee+Jenkins(docker版)自动推送并部署Springboot项目到远程服务器

如果要参考gitlab配置请参考GitlabWebhook自动推送并更新Springboot项目 Gitlab的配置部分 环境介绍 Jenkins服务器(Centos7.6): docker安装的jenkins,参考Jenkins(docker安装)部署Springboot项目JDK1.8Maven3.6.3 注意docker安装的jenkins,而且是较新的版本,所以jenkins容器…

Tomcat的介绍和安装配置、eclipse中动态web项目的创建和运行、使用IDEA创建web项目并运行

一、Tomcat的介绍和安装配置 安装tomcat&#xff1a; 环境变量的配置&#xff1a; 配置之后重启cmd&#xff0c;执行startup命令&#xff0c;启动tomcat 在localhost:8080&#xff0c;能进入tomcat主界面&#xff0c;说明配置成功 二、eclipse中动态web项目的创建和运行 tomca…

竞赛项目 深度学习疲劳驾驶检测 opencv python

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…

06微服务间的通信方式

一句话导读 微服务设计的一个挑战就是服务间的通信问题&#xff0c;服务间通信理论上可以归结为进程间通信&#xff0c;进程可以是同一个机器上的&#xff0c;也可以是不同机器的。服务可以使用同步请求响应机制通信&#xff0c;也可以使用异步的基于消息中间件间的通信机制。同…

Ansible的安装和配置

安装和配置 Ansible 安装所需的软件包 创建名为 /home/greg/ansible/inventory 的静态清单文件&#xff0c;以满足以下要求&#xff1a; 172.25.250.9 是 dev 主机组的成员 172.25.250.10 是 test 主机组的成员 172.25.250.11 和 172.25.250.12 是 prod 主机组的成员 172.2…

halo --- 上传图片服务器错误

文章目录 问题定位过程1、查看日志 报错的是数据库操作异常2、再次上传一张小一点的图片3、检查nginx的配置文件 原因解决 问题 上传图片时&#xff0c;报错服务器错误&#xff08;包括上传附件、博客文章插入图片、上传相册&#xff09; 定位过程 1、查看日志 报错的是数据库…

Element组件浅尝辄止4:Button组件

Button按钮组件&#xff1a;用途太广泛了&#xff0c;几乎参与到了日常开发中的方方面面 1.如何使用&#xff1f;How? //使用type、plain、round和circle属性来定义 Button 的样式。<el-row><el-button>默认按钮</el-button><el-button type"primar…

企业微信 企业内部开发 学习笔记

官方文档 文档 术语介绍 引入pom <dependency><groupId>com.github.binarywang</groupId><artifactId>wx-java-cp-spring-boot-starter</artifactId><version>4.5.3.B</version></dependency>核心代码 推送消息 final WxCp…

【Spring专题】Spring底层核心原理解析

目录 前言阅读导航前置知识Q1&#xff1a;你能描述一下JVM对象创建过程吗&#xff1f;Q2&#xff1a;Spring的特性是什么&#xff1f;前置知识总结 课程内容一、Spring容器的启动二、一般流程推测2.1 扫描2.2 IOC2.3 AOP 2.4 小结三、【扫描】过程简单推测四、【IOC】过程简单推…