vue组件-BaseTime.vue

ansheng02

于 2019-12-18 09:48:59 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： vue组件开发记录文章标签：当前时间组件 vue组件

本文链接：https://blog.youkuaiyun.com/ansheng02/article/details/103592100

vue组件开发记录专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Vue.js和moment.js实现的实时更新时间显示的组件。该组件通过setInterval每隔一秒更新当前时间，格式为'YYYY-MM-DD HH:mm:ss'，并在组件销毁前清除定时器，避免内存泄漏。

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

//BaseTime.vue
<template>
  <div>{{ now }}</div>
</template>
<script>
import moment from "moment";
export default {
  data: function() {
    this.moment = moment;
    return {
      now: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
    };
  },
  mounted() {
    this.startClock();
  },
  beforeDestroy() {
    clearInterval(this.clockInterval);
  },

  methods: {
    startClock() {
      clearInterval(this.clockInterval);
      this.clockInterval = setInterval(() => {
        this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    }
  }
};
</script>