当前时间不足10补0(VUE/JS)

<template>
    <div id="zptime">
        {{setDate}}
    </div>
</template>

<script>
  export default {
    name: 'zptime',
    data() {
      return {
        date: new Date(),
      }
    },
    computed: {
      setDate() {
        let year = this.timeAdd0(this.date.getFullYear().toString()),
          month = this.timeAdd0((this.date.getMonth() + 1).toString()),
          date = this.timeAdd0(this.date.getDate().toString()),
          hour = this.timeAdd0(this.date.getHours().toString()),
          minute = this.timeAdd0(this.date.getMinutes().toString()),
          sec = this.timeAdd0(this.date.getSeconds().toString());
        // return `当前时间: ${this.date.getFullYear()}.${this.date.getMonth() + 1}.${this.date.getDate()} ${this.date.getHours()}:${this.date.getMinutes()}:${this.date.getSeconds()}`
        return `当前时间: ${year}.${month}.${date} ${hour}:${minute}:${sec}`
      }
    },
    mounted() {
      setInterval(() => {
        this.date = new Date()
      }, 1000);
    },
    methods: {
      timeAdd0(m) {
        if (m.length < 2) {
          m = '0' + m;
        }
        return m
      }
    }

  }
</script>
<style scoped>
    #zptime {
        line-height: 75px;
        color: rgba(255, 255, 255, 0.6);
        font-size: 20px;
    }
</style>

 

posted @ 2020-10-28 10:09  醒日是归时  阅读(1008)  评论(0编辑  收藏  举报