vue项目中实时更新时间

格式： 当前时间：2020年8月7-15时54分14秒

<template>
  <div id="demo">
    <!-- b标题 -->
    <header class="header">
        <h1>大数据可视化面板</h1>
        <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
    </header>
  </div>
</template>
<script>
import moment from 'moment' // 导入模块
moment.locale('zh-cn') // 设置语言 或 moment.lang('zh-cn');
export default {
  data () {
    return {
      dt: ''
    }
  },
  methods: {
    getDate () {
      var t = null
      t = setTimeout(time, 1000)// 開始运行
      function time () {
        clearTimeout(t)// 清除定时器
        this.dt = new Date()
        var y = this.dt.getFullYear()
        var mt = this.dt.getMonth() + 1
        var day = this.dt.getDate()
        var h = this.dt.getHours()// 获取时
        var m = this.dt.getMinutes()// 获取分
        var s = this.dt.getSeconds()// 获取秒
        document.querySelector('.showTime').innerHTML = '当前时间：' + y + '年' + mt + '月' + day + '-' + h + '时' + m + '分' + s + '秒'
        t = setTimeout(time, 1000) // 设定定时器，循环运行
      }
    }
  },
  mounted () {
    this.getDate()
  }
}
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
}
.header {
  position: relative;
  height: 100px;
  background: url("../../assets/images/head_bg.png") no-repeat top center;
  background-size: 100% 100%;
}
h1 {
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 80px;
}
</style>