vue全局过滤器---格式化时间戳/将时间戳转换成“几天前”“几个小时前”“几分钟前”

最新推荐文章于 2024-11-06 10:45:00 发布
最新推荐文章于 2024-11-06 10:45:00 发布
阅读量766 收藏 1
点赞数
文章标签： vue javascript 过滤器 es6/es7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/meoncih_/article/details/107826918
版权
本文介绍了一个名为filter.js的文件，其中包含了格式化时间戳的函数，能够将时间戳转换为相对时间描述，如“几天前”、“几个小时前”等。并通过全局过滤器在main.js中使用这些函数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

编写了个文件并命名为filter.js
格式化时间戳函数：
在这里插入图片描述
将时间戳转换成“几天前”“几个小时前”“几分钟前”
在这里插入图片描述
将两个函数导出
在这里插入图片描述
在main.js中导入
在这里插入图片描述
并且对两个函数进行全局过滤器注册
通过Object的API获取键值，返回一个元素为键值的数组
在这里插入图片描述

Vue element-ui 全局配置时间戳转换正确日期
weixin_41346436的博客
03-30 692
使用和安装moment.js 即可 npm install moment -S or yarn add moment -S 在main.js全局引入注册使用这个插件 import moment from "moment"; // 全局过滤器的定义 Vue.filter("global_filter", function(value, type = "YYYY-MM-DD hh:mm:ss") { return moment(value).format(type); }); 使用： 单标签使用 &
将时间转化为“刚刚，几分钟前，几小时前，具体日期”
菜鸡互啄的博客
07-05 1330
在写医东端的项目时，有个需求是，需要将后端返回的时间显示为“刚刚”，“几分钟前”。。。这种形式，写了个过滤器，记录在此： // 时间格式（2021-07-02 12：12：12） 显示为几分钟前，几小时前等 Vue.filter('timeChange', function (value) { // 拿到当前时间戳和发布时的时间戳 var curTime = new Date() var postTime = new Date(value) //计算差值 var timeDiff = curT
js 显示时间戳转化为几分钟之前多久之前方法函数
廖圣平
08-04 1717
function getDateDiff(data) { //var str = data; //将字符串转换成时间格式 var timePublish = new Date(data); var timeNow = new Date(); var minute = 1000 * 60; var hour = minute * 60; var
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
10-14
主要介绍了Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现全局时间过滤器
Missbelover的博客
10-24 403
import Vue from ‘vue’ //全局过滤器 Vue.filter(‘dateFmtTime’, input => { if (!input) return “–” input = input.toString().length < 13 ? input * 1000 : input; var date = new Date(input); var YY = date.getFullYear() + '-'; var MM = (date.getMonth() + 1 < 1
vue3全局注册 过滤时间格式，复制功能
Zhouyuding_yyds的博客
02-18 304
vue3 全局方法注册 复制，时间格式化 功能
在Vue项目中使用 Moment.js时间格式化库，得到相对于当前时间的表现形式(几分钟前、几小时前，几日前、几月前，几年前)
weixin_47700309的博客
10-28 2116
在Vue中使用 Moment.js时间格式化库插件（全局过滤器） 如有更多需求请参考官方文档： http://momentjs.cn/ 需求： 把这个Date时间格式字符串: “2019-10-15T07:20:47.000Z” 通过时间格式化库 得到距离现在是 “几年前” 一、安装，或者下载 安装moment时间格式化库： npm install moment --save # npm 下载： http://cdn.staticfile.org/moment.js/2.24.0/moment.
web前端vue filter 过滤器
08-28
Vue filter 过滤器是一种特殊的函数，可以在模板中使用，以格式化和转换数据。这些函数可以在双花括号插值和 v-bind 表达式中使用，以实现文本格式化和数据转换。 使用场景 Vue filter 过滤器可以在多种场景下使用...
【JavaScript源代码】vue使用过滤器格式化日期.docx
12-29
以下是一个关于如何在Vue.js中使用过滤器格式化日期的详细说明： 1. **查看未过滤格式化的日期格式** 在Vue.js应用中，如果直接在模板中使用`{{ date }}`，默认情况下日期将以JavaScript原生的日期格式展示，如...
vue 原生全局过滤器时间戳转日期
05-30
在 Vue 中也可以使用原生的全局过滤器来实现时间戳转日期的功能。以下是一个示例： ```javascript Vue.filter(&#39;formatDate&#39;, function(value) { if (value) { const date = new Date(value) const year = date....
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
10-24
主要介绍了js实现时间显示几天前、几小时前或者几分钟前的方法,实例汇总分析了时间显示格式转换的常用思路与技巧,需要的朋友可以参考下
js 计算时间（几分钟前、几小时前、几天前、几周前、几月前）
10-18
js 计算时间（几分钟前、几小时前、几天前、几周前、几月前）
vue3自定义指令显示(刚刚 分钟前 小时前...)
h1606641309的博客
07-09 350
例如实现聊天评论我们可以看见当前评论下的评论日期距离当前日期的时间范围,然人在观看评论的时候可以一眼就知道当前的评论距离此时有多久,可以一目了然.
vue_过滤格式化日期&显示几天前、几小时前···
ZH
07-29 2198
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
vue封装 时间戳转换和转换成多久前或刚刚
m0_59829743的博客
10-20 581
时间戳转换和转换成多久前或刚刚。
js 根据时间，输出几分钟前，几小时前，几天前，几个月前，几年前。
weixin_62226731的博客
07-04 605
用var time = new Date("2021-05-01 12:53:59.55".replace(/-/g,"/"))即可。查阅博客后发现需要将对象格式化为："2021/05/01 12:53:59.55" 可同时兼容 android 和 ios。"2021-05-01 12:53:59.55" 时间对象在 ios 中会出现 NaN-NaN1-NaN。
js实现刚刚，几秒前，几分钟前，几小时前的描述
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
03-11 561
【代码】js实现刚刚，几秒前，几分钟前，几小时前的描述。
js计算几分钟前、几小时前、几天前
m0_67444502的博客
08-04 1180
计算几分钟前、几小时前、几天前
Js 之获取几秒、几分钟、几小时、几天前
最新发布
样子的博客
11-06 259
一、代码 /** * 获取几秒、几分钟、几小时、几天前 * @param time * @returns {string} */ function getDiffTime(time) { var nowTime = parseInt((new Date().getTime()) / 1000); var date = new Date(time * 1000); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值