使用day.js实时显示时间【Vue】

最新推荐文章于 2025-07-25 10:55:03 发布

修炼室

最新推荐文章于 2025-07-25 10:55:03 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：使用教程文章标签： javascript vue.js 前端 day.js

本文链接：https://blog.csdn.net/qq_22841387/article/details/124675631

使用教程专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装并使用day.js库，包括局部和全局引入方法。重点展示了如何在模板中显示实时更新的时间，并在created和mounted钩子中实现定时更新。

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

1.安装day.js

npm install -S dayjs

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIGCQ7rP-1652102357850)(assets/image-20220509210449-2y5976g.png)]

2.组件局部引入

import dayjs from 'dayjs'

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYQYfjSM-1652102357851)(assets/image-20220509210946-ebvvem0.png)]
若需要在全局引入，可自行在main.js中导入，并挂在至vue原型上

// 导入day.js
import dayjs from 'dayjs'
Vue.prototype.$dayjs = dayjs

3.项目中使用

<template>
     <span id="time">当前时间：{{ nowTime }}</span>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      timer:null,
    };
  },
  methods: {
    showNowTime() {
      this.timer = setInterval(() => {
      const date = dayjs(new Date());
      this.nowTime = date.format('HH:mm:ss')
    }, 1000);
  
    },
  },
  created() {
    this.showNowTime();
  },

  mounted() {
    this.showNowTime()
  },