使用Vue的filters模拟微信朋友圈的时间显示格式

沐小侠

已于 2022-04-08 11:18:37 修改

阅读量491

点赞数

分类专栏： Vue.js

于 2021-10-08 17:58:14 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/120656853

版权

Vue.js 时间格式化动态显示朋友圈日期过滤

关键词由CSDN通过智能技术生成

Vue.js 专栏收录该内容

26 篇文章 7 订阅

订阅专栏

模拟微信朋友圈的时间显示格式
在这里插入图片描述
代码实现：
dateFormat.js

/* 假设一个发布的时间，和当前系统时间比较 */
//不满足1分钟，刚刚
//不满足1小时，几分钟前
//不满足1天，几小时前
//不满足2天，昨天
//不满足一个月时，几天前

const dateFormat = Vue.filter('dateFormat', (date) => {
	//获取当前时间的毫秒值
	const now = new Date().getTime();
	//获取过滤时间的毫秒值
	const datetime = date.getTime();
	//计算出两个时间之间相差的秒值
	const interval = (now - datetime) / 1000;
	//判断
	if (interval < 60) {
		return '刚刚'
	} else if (interval < (60 * 60)) {
		return `${parseInt(interval/60)}分钟前`
	} else if (interval < (60 * 60 * 24)) {
		return `${parseInt(interval/60/60)}小时前`
	} else if (interval < (60 * 60 * 24 * 2)) {
		return '昨天'
	} else if (interval < (60 * 60 * 24 * 8)) {
		return `${parseInt(interval/60/60/24)}天前`
	} else {
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		month = month < 10 ? `0${month}` : month;
		let day = date.getDate();
		day = day < 10 ? `0${day}` : day;
		let h = date.getHours();
		h = h < 10 ? `0${h}` : h;
		let m = date.getMinutes();
		m = m < 10 ? `0${m}` : m;
		let s = date.getSeconds();
		s = s < 10 ? `0${s}` : s;
		return `${year}-${month}-${day} ${h}:${m}:${s}`
	}
})

export default dateFormat;

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间过滤</title>
	</head>
	<body>
		<div id="app">
			<h1>{{datetime1|dateFormat}}</h1>
			<h1>{{datetime2|dateFormat}}</h1>
			<h1>{{datetime3|dateFormat}}</h1>
			<h1>{{datetime4|dateFormat}}</h1>
			<h1>{{datetime5|dateFormat}}</h1>
			<h1>{{datetime6|dateFormat}}</h1>
		</div>
		<script src="js/vue.js"></script>
		<script type="module">
			//导入全局过滤器
			import dateFormat from './js/dateFormat.js'
			const vm = new Vue({
				el:'#app',
				data:{
					//模拟发朋友圈的时间
					datetime1:new Date(),
					datetime2:new Date('2022/4/8 11:12:10'),
					datetime3:new Date('2022/4/8 09:04:52'),
					datetime4:new Date('2022/3/7 11:04:52'),
					datetime5:new Date('2022/2/6 10:04:52'),
					datetime6:new Date('2021/9/30 10:55:52')
				}
			});
		</script>
	</body>
</html>

沐小侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Vue的filters模拟微信朋友圈的时间显示格式

模拟微信朋友圈的时间显示格式，使用filters实现时间过滤。/* 假设一个发布的时间，和当前系统时间比较 *///不满足1分钟，刚刚//不满足1小时，几分钟前//不满足1天，几小时前//不满足2天，昨天//不满足一个月时，几天前
复制链接

扫一扫