vue使用过滤（filter）实现根据文章发表的时间来显示它是几小时前,几分钟前

最新推荐文章于 2023-08-21 20:10:05 发布

清酒独酌

最新推荐文章于 2023-08-21 20:10:05 发布

阅读量510

点赞数

分类专栏： vue 文章标签： vue.js javascript vue

本文链接：https://blog.csdn.net/yang68668/article/details/122241043

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!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>

清酒独酌

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue使用过滤（filter）实现根据文章发表的时间来显示它是几小时前,几分钟前

<!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>D.
复制链接

扫一扫