vue实现获取当前日期时间并实时刷新（不刷新）

最新推荐文章于 2025-06-16 16:14:48 发布

Alley_h.

最新推荐文章于 2025-06-16 16:14:48 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/weixin_47794734/article/details/119570531

这篇博客展示了三种在Vue中实现当前时间实时更新的方法。第一种通过定时器每30秒更新时间，第二种使用setInterval每500毫秒刷新时间，第三种则是在组件挂载后每秒更新时间，并且使用了过滤器格式化时间。所有方法都在组件销毁时正确清理定时器，避免内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法：获取当前时间不刷新

<template>
  <div>
    <span>{{date}}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date:"",
      timer:null
    }
  },
  methods:{
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
      this.date = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;

      console.log(this.date);
    },
    // 定时器函数
    nowTimes() {
      this.timeFormate(new Date());
      this.timer = setTimeout(this.nowTimes, 30 * 1000);
    }
  },
  //调用定时器
  created() {
    this.nowTimes();
  },
  //销毁定时器
  beforeDestroy: function() {
    if (this.timer) {
      console.log("销毁定时器")
      clearTimeout(this.timer); //在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

第二种方法：（刷新）

<template>
  <div>{{ nowDate }}</div>
</template>

<script>
export default {
  data() {
    return {
      nowDate: "", // 当前日期
    };
  },
  methods: {
    currentTime() {
      setInterval(this.getCurrentTime, 500);
    },
    // formatDate() {
    //   let date = new Date();
    //   let year = date.getFullYear(); // 年
    //   let month = date.getMonth() + 1; // 月
    //   let day = date.getDate(); // 日
    //   let week = date.getDay(); // 星期
    //   let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
    //   let hour = date.getHours(); // 时
    //   hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
    //   let minute = date.getMinutes(); // 分
    //   minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
    //   let second = date.getSeconds(); // 秒
    //   second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
    //   this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    // }
      getCurrentTime() {
        //获取当前时间并打印
        var _this = this;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        _this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
        this.nowDate = _this.gettime
        console.log(_this.gettime)
      }
  },
  mounted() {
    this.currentTime();
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.getCurrentTime) {
      clearInterval(this.getCurrentTime); // 在Vue实例销毁前，清除时间定时器
    }
  }
};
</script>

第三种方法：（刷新）

<template>
  <div>
    <p>当前时间是：{{currentTime}}</p>
    <p>----------------------</p>
    <p>当前时间是：{{time | formatTime('yyyy-MM-dd')}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentTime: '',
      time: Date.now()
    }
  },
  mounted() {
    this.getCurrentTime()
  },
  methods: {
    getCurrentTime() {
      setInterval(() => {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours() + ''
        let minute = date.getMinutes() + ''
        let second = date.getSeconds() + ''
        return this.currentTime = `${year}年${month}月${day}日 ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
      }, 1000)

    }
  },
  filters:{
    formatTime(val,fmStr) {
      let date = new Date(val)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours() + ''
      let minute = date.getMinutes() + ''
      let second = date.getSeconds() + ''
      if (fmStr && fmStr === 'yyyy-MM-dd'){
        return `${year}-${month}-${day}`
      } else {
        return `${year}-${month}-${day} ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
      }

    }
  }
}
</script>