vue獲取當前時間並實時刷新時間

實現效果：

 

1. html展示時間
2. data中定義數據
3. 在created里設置定時器，重置時間格式
4. 在methods里寫過濾小於10 的時候前面加0的方法

5. 在Vue實例銷毀前，清除定時器

 

<div>
    <span>{{currentTime}}</span>
</div>

data() {
            return{
                timer: "",//定義一個定時器的變量
                currentTime: new Date(), // 獲取當前時間
                
            }
        },

created() {
            var vm = this;
            vm.timer = setInterval(() => {
                    var y = new Date().getFullYear();
                    var m = vm.appendZero(new Date().getMonth() + 1);
                    var d = vm.appendZero(new Date().getDate());
                    var ho = vm.appendZero(new Date().getHours());
                    var mi = vm.appendZero(new Date().getMinutes());
                //修改數據date
                vm.currentTime = y + "/" + m + '/' + d + ' ' + ho + ':' + mi;
            }, 1000);
            
        },

methods: {
            //時間過濾加0
            appendZero(obj) {
                if (obj < 10) {
                    return "0" + obj;
                } else {
                    return obj;
                }
            },
        },

beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue實例銷毀前，清除我們的定時器
            }
        }