moment实现当前时间组件

最新推荐文章于 2025-05-22 09:11:02 发布

原创最新推荐文章于 2025-05-22 09:11:02 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #javascript

本文介绍了如何在Vue2项目中利用moment.js创建一个实时更新的动态时间组件，包括引入库、设置定时器在created生命周期钩子中更新时间和日期，以及格式化输出星期等信息。

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

moment是个时间组件，下面用vue2做个使用演示

使用前记得先下载

npm install moment --save

使用的使用引入就可以

import moment from 'moment'

先看一下我实现的效果

左侧的时间需要一秒一秒走动，需要写个定时器，写在created里面就行

  created() {
    this.getCurrentTime();
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },

 getCurrentTime() {
       //获取当前的时分秒
      this.nowTime = moment().format("HH:mm:ss");
       //如果需要星期的可以写个枚举，moment返回的要么就是0-6,要么就是英文的星期，
      let weekMap = {
        1: "星期一",
        2: "星期二",
        3:'星期三',
        4: "星期四",
        5: "星期五",
        6: "星期六",
        0: "星期日",
      };
        //周几的数字，0代表周天
      this.nowWeek =weekMap[moment().day()];
        //获取年月日
      this.newDate=moment().format('YYYY.MM.DD')
    },