vue 动态时间 时分秒

<template>
  <div class="studentRoom">
     <div class="blackboard">当前时间是：{{currentTime}}</div>
  </div>
</template>

<script>
export default {
  name: 'studentRoom',
  data () {
    return {
        timer: "",//定义一个定时器的变量
        currentTime: new Date(), // 获取当前时间
    }
  },
  created() {
    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function() {
      _this.currentTime = 
         new Date().getHours() +
         ":" +
         new Date().getMinutes() +
         ": " +
         new Date().getSeconds();
    }, 1000);
       
  },
    beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
     }
    },

}
</script>