Vue利用过滤器（filters）做电子时钟

最新推荐文章于 2024-01-05 18:00:00 发布

L＆wy

最新推荐文章于 2024-01-05 18:00:00 发布

阅读量222

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44719554/article/details/108774038

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue.js应用中使用过滤器（filters）创建一个实时更新的电子时钟效果。通过深入理解Vue的filter API，你可以学会如何定制过滤器并在模板中动态显示当前时间。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        {{nowdate | myfilter}}

    </div>

    <script>
        //格式化日期
        Date.prototype.pattern = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时 
                "H+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            var week = {
                "0": "/u65e5",
                "1": "/u4e00",
                "2": "/u4e8c",
                "3": "/u4e09",
                "4": "/u56db",
                "5": "/u4e94",
                "6": "/u516d"
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }


        //创建对象
        var vm = new Vue({
            el: "#app",
            data: {
                nowdate: null
            },
            //挂载前
            created: function () {
                this.nowdate = new Date();
            },
            //挂载后
            mounted: function () {
                var this_a = this;
                setInterval(function () {
                    this_a.nowdate = new Date();

                }, 1000)

            },
            //创建过滤器
            filters: {
                myfilter: function (val) {
                    var result = "";
                    result = "当前时间：" + val.pattern("yyyy-MM-dd hh:mm:ss");
                    //返回格式化之后的字符串
                    return result;
                }
            }

        })

    </script>

</body>

</html>