vue.js格式化時間並每秒更新

_code小學生發表於2018-03-24
Vue.js
<!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>

相關文章