前端界面显示当前时间的Vue代码 

<!DOCTYPE html> 
<html> 
<head> <meta charset="utf-8">
    <title>Vue 示例</title>
</head> 
<body>
    <div id="app" >
      {{ date | formatDate }}
    </div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    var padDate = function(value){
        return value < 10 ? '0' + value :value;
    }
    var app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        filters: {
            formatDate: function (value) {
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth() + 1);
                var day = padDate(date.getDay());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                // 整理并返回
                return year + '-' + month + '-' + day + '-' + hours + '?' + minutes + '?' + seconds;
            }
        },
        mounted: function () {
            var _this = this; // 指向this 变量作用域一致;
            this.timer = setInterval(function() {
                _this.date = new Date(); // 修改date
            },1000);
        },
        beforeDestroy: function() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
        // created: function () {
        //     console.log(this.a);
        // },
        // mounted: function () {
        //     var _this = this; //声明一个变量指向 Vue 实例 this，保证作用域一致
        //     this.timer = setInterval (function () {
        //         this.date = new Date();
        //         console.log(this.date);// 修改date
        //     },1000);
            
        // },
        // beforeDestory: function () {
        //     if (this.timer) {
        //         clearInterval(this.timer);  //在 Vue 实例销毁前，清除我们的定时器

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

　　

posted on 2020-09-18 10:46  王半仙儿的博客  阅读(1534)  评论(0)  编辑  收藏  举报

导航