vue.js格式化时间并每秒更新

最新推荐文章于 2024-07-14 22:44:48 发布

Code Pupil

最新推荐文章于 2024-07-14 22:44:48 发布

阅读量3.5k

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/Code_Pupil/article/details/79677283

版权

vue.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Vue.js -->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--# vue.js支持在{{  }}插值的尾部添加一个管道符“(|)”对数据进行过滤，经常用于格式化文本，比如字母全部大写，货币千位使用逗号分隔等。过滤的规则是自定义的，通过给vue实例添加选项filters来设置，例如对显示时间的格式化处理 #-->
    {{ date | formatDate }}
</div>
</body>
</html>
<script>
    var myData = {
        date:new Date()
    };
    //在月份、日期、小时等小于10前面补0
    var padDate = function (value) {
        return value <10 ? '0' + value:value;
    };
    var app = new Vue({
        el:'#app',
        data:myData,
        filters: {
            formatDate:function (value) {
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth()+1);
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;
            }
        },
        //实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用
        created:function () {

        },
        //el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
        mounted:function () {
            var _this = this;  //声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(function(){
                _this.date = new Date();  //修改数据date
            },1000)
        },
        //实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等
        beforeDestroy:function(){
            if(this.timer){
                clearInterval(this.timer);  //在Vue实例销毁前，清除我们的定时器
            }
        }
    })
</script>

Code Pupil

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js格式化时间并每秒更新

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
复制链接

扫一扫

专栏目录