Vue 动态时间显示

简介

用于网页上显示动态时间。

前端代码

<template>
<span ><p>{{ date }}</p></span>
</template>

export default {
data(){
    return {
    time: '',
    date: '',
  };
  },
mounted(){
    this.Timer();
},
methods: {
    Timer(){
        var timerID = setInterval(this.updateTime, 1000);
        this.updateTime();
        return timerID
    },
    updateTime() {
        // var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        var cd = new Date();
        this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
        this.date = this.zeroPadding(cd.getFullYear(), 4) + '/' + this.zeroPadding(cd.getMonth()+1, 2) + '/' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.time;
    },
    zeroPadding(num, digit) {
        var zero = '';
        for(var i = 0; i < digit; i++) {
          zero += '0';
        }
        return (zero + num).slice(-digit);
    }
       }
}

关键技术

1. 时间设置

参考

[1] vue写一个带日期的时钟