Vue - 获取当前时间，并实时刷新

一. Vue 中如何获取当前时间，并实时更新当前时间

1. data 生命周期中定义两个变量

   data() {
     return {
       times:'',//格式化之后的当前时间
     };
   },
   

2. created 生命周期中调用当前时间

   created() {
     this.getTimes()
   },
   methods: {
     getTimes(){
       setInterval(this.getTimesInterval, 1000);
     },
     getTimesInterval:function() {
       let _this = this;
       let year = new Date().getFullYear(); //获取当前时间的年份
       let month = new Date().getMonth() + 1; //获取当前时间的月份
       let day = new Date().getDate(); //获取当前时间的天数
       let hours = new Date().getHours(); //获取当前时间的小时
       let minutes = new Date().getMinutes(); //获取当前时间的分数
       let seconds = new Date().getSeconds(); //获取当前时间的秒数
       //当小于 10 的是时候，在前面加 0
       if (hours < 10) {
         hours = "0" + hours;
       }
       if (minutes < 10) {
         minutes = "0" + minutes;
       }
       if (seconds < 10) {
         seconds = "0" + seconds;
       }
       //拼接格式化当前时间
       _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
     }
   }
   

3. 在Vue实例销毁前，beforeDestroy 生命周期中清除定时器

   beforeDestroy() {
     if (this.times) {
       clearInterval(this.getTimesInterval); 
     }
   },
   

二. 一个实例

<template>
  <div>
    {{times}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      times:'',//格式化之后的当前时间
    };
  },
  created() {
    this.getTimes()
  },
  // 在Vue实例销毁前，清除我们的定时器
  beforeDestroy() {
    if (this.times) {
      clearInterval(this.getTimesInterval); 
    }
  },
  methods: {
    getTimes(){
      setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval:function() {
      let _this = this;
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      let hours = new Date().getHours(); //获取当前时间的小时
      let minutes = new Date().getMinutes(); //获取当前时间的分数
      let seconds = new Date().getSeconds(); //获取当前时间的秒数
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      //拼接格式化当前时间
      _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
  }
};
</script>

<style scoped>
</style>