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

我不是女神ヾ 2021-07-25 19:04 960阅读 0赞

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

1.  `data` 生命周期中定义两个变量
    
        data() {
          return {
            times:'',//格式化之后的当前时间
            currentTime: new Date() //当前时间
          };
        },
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:'',//格式化之后的当前时间
          currentTime: new Date() //当前时间
        };
      },
      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>