电子时钟

<template>
  <div class="format-date">
    <span>
      {{ time | formatDate }}
    </span>
    <span class="week">
      {{ time | formatWeek }}
    </span>
  </div>
</template>

<script>
export default {
  filters: {
    formatDate: function (value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    },

    formatWeek: (value) => {
      var days = value.getDay()
      let week = ''
      switch (days) {
        case 1:
          week = '星期一'
          break
        case 2:
          week = '星期二'
          break
        case 3:
          week = '星期三'
          break
        case 4:
          week = '星期四'
          break
        case 5:
          week = '星期五'
          break
        case 6:
          week = '星期六'
          break
        case 0:
          week = '星期日'
          break
      }
      return week
    }
  },

  data () {
    return {
      time: new Date(),
    }
  },

  mounted () {
    this.datetime = setInterval(() => {
      this.time = new Date()
    }, 1000)
  },

  beforeDestroy () {
    clearInterval(this.datetime) // 在Vue实例销毁前，清除我们的定时器
  },
}
</script>

<style lang="less" scoped>
.format-date{
  width: 400px;
  text-align: center;
  font-size: 20px;
  color: #8dc7db;
}
.week {
  margin-left: 10px;
}
</style>