显示当前时间并且格式化

时间：2019-03-26 23:32:21 阅读：184 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示当前时间</title>
</head>
<body>
    <div id="app">
        {{date | formatDate}}
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 在月份、日期、小时等小于10时前补0
        var padDate = function(value){
            return value < 10 ? ‘0‘+ value : value;
        };
        
        var app = new Vue({
            el:‘#app‘,
            data:{
                date: new Date()
            },
            filters:{
              formatDate:function(value){// 这里的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;
              }  
            },
            mounted:function(){
                var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
                this.timer = setInterval(function(){
                    _this.date = new Date();// 修改数据date
                },1000);
            },
            beforeDestroy:function(){
                if(this.timer){
                    clearInterval(this.timer);// 在Vue实例销毁前，清除我的的定时器
                }
            }
        })
    </script>
</body>
</html>

显示当前时间并且格式化

原文：https://www.cnblogs.com/sunxun001/p/10604577.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

显示当前时间 并且格式化

显示当前时间并且格式化