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.mzph.cn/news/31926.shtml

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

相关文章

msvcp120.dll丢失的解决方法,Win11系统报错处理方法

在使用Windows11系统的时候&#xff0c;出现报错msvcp120.dll丢失我们需要怎么去修复它呢&#xff1f;msvcp120.dll是Windows操作系统中的一个重要的动态链接库文件&#xff0c;它包含了许多用于C程序的函数和类。然而&#xff0c;有时候我们可能会遇到msvcp120.dll丢失或损坏的…

UI美工设计的主要职责(合集)

UI美工设计的主要职责1 职责&#xff1a; 1、执行公司的规章制度及专业管理办法; 2、 负责重点项目的原型设计和产品流程设计、视觉设计&#xff0c;优化网站和移动端的设计流程和规范&#xff0c;制定产品 UI/UE规范及文档编写; 3、负责使用PS、AI、illustrator、MarkMan、…

matplotlib FormatStrFormatter设置坐标轴的标注为整数和小数【设置小数点的数目】

利用FormatStrFormatter 进行设置 1 设置为整数 import matplotlib.pyplot as plt from matplotlib.ticker import FormatStrFormatter# 创建一个图表 fig, ax plt.subplots()# 生成一些示例数据 x [1, 2, 3, 4, 5] y [1000, 2000, 3000, 4000, 5000]# 在 x 轴上设置刻度标…

【前端】CSS水平居中的6种方法

左右两边间隔相等的居中 文章目录 flex绝对定位margin:auto绝对定位margin:负值定位transformtext-align: center;margin: 0 auto;思维导图 flex display: flex;justify-content: center; <div classparent><div class"son"></div> </div>…

uni-app:实现点击按钮,进行数据累加展示(解决数据过多,导致出错)

效果 代码 核心代码 一、标签显示 <!-- 加载更多 --> <view class"load_more" v-if"info.length > pageNum * pageSize" tap"loadMore">加载更多 </view> v-if"info.length > pageNum * pageSize"&#xf…

辽宁线上3D三维虚拟工厂生产仿真系统应用场景及优势

工厂虚拟仿真是一种基于计算机技术和虚拟现实技术的数字化解决方案&#xff0c;它可以通过模拟工厂中的设备、流程和操作&#xff0c;来为工程师和操作人员提供了一个沉浸式的虚拟环境&#xff0c;帮助他们更好地了解和优化工厂生产过程。 工厂VR三维可视化技术为工业生产提供了…

ruby send call 的简单使用

refer: ruby on rails - What does .call do? - Stack Overflow Ruby使用call 可以调用方法或者proc m 12.method("") # > method gets the method defined in the Fixnum instance # m.class # > Methodm.call(3) #> 15 # 3 is passed inside the…

LeetCode150道面试经典题--验证回文串(简单)

1.题目 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 true &#xff1b;否…

uniapp 微信小程序 封装公共的请求js(api版本)

一、新建api文件夹 在项目目录下创建api文件夹&#xff0c;内放files跟index.js文件夹&#xff0c;files文件夹内放每个页面对应的js请求接口 1、index.js /*** api接口的统一出口*/ const api {}; const requireComponent require.context(./files, false, /\.js$/) requi…

SpringCloud实用篇2——Nacos配置管理 Feign远程调用 Gateway服务网关

目录 1 Nacos配置管理1.1 统一配置管理1.1.1 在nacos中添加配置文件1.1.2 从微服务拉取配置 1.2 配置热更新1.2.1 方式一1.2.2 方式二&#xff08;推荐&#xff09; 1.3.配置共享 2 搭建Nacos集群2.1 集群结构图2.2 搭建集群2.2.1 初始化数据库2.2.2 下载nacos2.2.3 配置Nacos2…

竞赛项目 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…

面部表情识别4:C++实现表情识别(含源码,可实时检测)

面部表情识别4&#xff1a;C实现表情识别(含源码&#xff0c;可实时检测) 目录 面部表情识别4&#xff1a;C实现表情识别(含源码&#xff0c;可实时检测) 1.面部表情识别方法 2.人脸检测方法 3.面部表情识别模型(Python) &#xff08;1&#xff09; 面部表情识别模型的训练…

printf %.*s 原来是这样

今天看代码时&#xff0c;看到这样一个printf&#xff0c;以前没见过这样的&#xff0c;也没这样用过&#xff0c;一下子还真不知道是什么意思&#xff1a; // Response is received. Print it struct mg_http_message *hm (struct mg_http_message *) ev_data; printf("…

扫雷(超详解+全部码源)

C语言经典游戏扫雷 前言一.游戏规则二.所需文件三.创建菜单四.游戏核心内容实现1.创建棋盘2.打印棋盘3.布置雷4.排查雷5.game()函数具体实现 五.游戏运行实操六.全部码源 前言 &#x1f600;C语言实现扫雷是对基础代码能力的考察。通过本篇文章你将学会如何制作出扫雷&#xff…

Spring 使用注解储存对象

文章目录 前言存储 Bean 对象五大注解五大注解示例配置包扫描路径读取bean的示例 方法注解 Bean Bean 命名规则重命名 Bean 前言 通过在 spring-config 中添加bean的注册内容&#xff0c;我们已经可以实现基本的Spring读取和存储对象的操作了&#xff0c;但在操作中我们发现读…

每日一题——滑动窗口的最大值

滑动窗口的最大值 题目链接 暴力解法 最容易想到的当然还是通过两层循环来暴力求解&#xff1a;一层循环用来移动窗口&#xff0c;一层循环用来在窗口内找到最大值。这种做法的时间复杂度为O(kN)&#xff0c;会超出时间限制&#xff0c;因此&#xff0c;我们要找到更加高效的…

springboot国际化

springboot国际化 不需要引入额外的jar包 参考&#xff1a;https://zhuanlan.zhihu.com/p/551605839 1.rources要创建Resource Bundle 2.yml配置中引入Resource Bundle 引入Resource Bundle spring:messages:encoding: UTF-8basename: i18n/messages_common3.创建国际化工具…

海思ss928部署手写数字识别模型

大致流程--------------------------------------------------------------------------------------------------------------------- 模型转换---------------------------------------------------------------------------------------------------- 1&#xff1a;准备MNI…

【EI复现】考虑区域多能源系统集群协同优化的联合需求侧响应模型(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

https的原理和方案

文章目录 https原理为什么要加密常见的加密方式对称加密非对称加密数据摘要&&数据指纹数据签名 https的几种工作方案方案一&#xff1a;只使用对称加密方案二&#xff1a;只使用非对称加密方案三&#xff1a;两端都使用非对称加密方案四&#xff1a;非对称加密 对称加…