<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>发布于{{date | formater}}</p>
</div>
<script src="./vue.js"></script>
<!--
刚刚 n分前 n小时前 n天前 n月前 n年前
小于1分钟 小于60分 小于24小时 小于30天 小于12月 大于12月
60 60*60 60*60*24 60*60*24*30 60*60*24*30*12
-->
<script>
new Vue({
el: "#app",
data: {
date: new Date("2021-12-30 16:34:20") //时间
},
filters: {
formater(value) {
//获取要过滤的时间与当前时间的时间差。(单位秒)
const d = Math.floor((Date.now() - value.getTime()) / 1000)
const arr = [0, 60, 60 * 60, 60 * 60 * 24, 60 * 60 * 24 * 30, 60 * 60 * 24 * 30 * 12];
const _arr = ["刚刚", "分钟前", "小时前", "天前", "月前", "年前"];
/* 循环判断 */
for (var i = arr.length - 1; i >= 0; i--) {
if (d > arr[i]) {
/* 使用三元进行判断 */
return i == 0 ? _arr[i] : Math.floor(d / arr[i]) + _arr[i]
}
}
return value
}
}
})
</script>
</body>
</html>