for循环模拟新浪微博

最新推荐文章于 2023-11-09 11:24:12 发布

wh夜，知&秋

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量109

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45891729/article/details/120750281

版权

javascript vue.js html5

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>新浪微博</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
    <script src="./data.js"></script>
    <style>
        .box{
            background-color: aliceblue;
            margin: 10px;
        }
       
    </style>
</head>
<body>
    <div id="app">
        <button @click="load">load</button>
        <div v-for="el in arr" class="box">
            <img :src="el.user.profile_image_url">
            <p class="text-p">{{el.created_at|timedata}}发表</p>
            <p>{{el.text}}</p>
            <div>
                <span>点赞{{el.comments_count}}</span>
            </div>
        </div>
    </div>
    <script>
        console.log(res);
        new Vue({
            el: "#app",
            data: {
                arr: []
            },
            methods: {
                load() {
                    this.arr = res.statuses
                }
            },
            filters: {
                //过滤器处理时间
                timedata(times) {
                    let abstime = new Date() - new Date(times)
                    if (abstime <= 0) {
                        return "未知时间"
                    } else if (abstime > 0 && abstime < 1000 * 60) {
                        return "刚刚"
                    } else if (abstime > 1000 * 60 && abstime < 1000 * 60 * 60) {
                        let time = new Date(times)
                        return `${new Date().getMinutes()-time.getMinutes()}分钟前`
                    } else if (abstime > 1000 * 60 * 60 && abstime < 1000 * 60 * 60 * 24) {
                        let time = new Date(times)
                        return `${new Date().getHours()-time.getHours()}小时前`
                    }
                }
            }
        })
    </script>
</body>
</html>```