过滤器filter实现动态时钟-demo

最新推荐文章于 2024-06-07 16:03:08 发布

原创最新推荐文章于 2024-06-07 16:03:08 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue初专栏收录该内容

24 篇文章

订阅专栏

这篇博客讨论了一个使用Vue.js和Day.js在网页中实时显示当前时间的代码示例。在页面加载时，时间显示区域出现了闪烁的问题。作者通过分析源码，发现是在`mounted`钩子中设置的时间更新间隔导致的。解决方案可能涉及调整时间更新逻辑或优化DOM渲染。

源码：

<!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>
    <script src="./js/dayjs.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>转换前：{{first}}</p>
        <p>转换后：{{first | timeFormat}}</p>
    </div>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                first:Date.now()
            },
            mounted(){
                this.first=setInterval(()=>{this.first=Date.now()},1000)
            },
            filters:{
                timeFormat(val){
                  return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            beforeDestroy(){
                clearInterval(this.first)
            }
            // watch:{
            //     first(){
            //         setInterval(()=>{
            //             this.first=Date.now();
            //         },1000)

            //     }
            // }
            

        })
    </script>
</body>
</html>