VUE环境下获取当前时间并格式化--按秒数更新

最新推荐文章于 2025-10-16 16:36:32 发布

原创最新推荐文章于 2025-10-16 16:36:32 发布 · 7.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#JS #VUE

Vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的实时时间显示组件，通过setInterval和Vue的生命周期钩子mounted及beforeDestroy，确保时间的准确更新和定时器的正确清理。


 <el-col :span="8"><div class="grid-content title-time"> {{date}}</div></el-col>

 mounted(){
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date =this.getTime(); // 修改数据date
    }, 1000)
  },
  methods:{
     getTime(){
       var date1=new Date();
       var year=date1.getFullYear();
       var month=date1.getMonth()+1;
       var day=date1.getDate();
       var hours=date1.getHours();
       var minutes=date1.getMinutes();
       var seconds=date1.getSeconds();
       return year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds
     }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }