Vue2，动态显示时间

最新推荐文章于 2025-02-17 10:16:15 发布

库库林_沙琪马

最新推荐文章于 2025-02-17 10:16:15 发布

阅读量751

点赞数 6

分类专栏： # Vue组件直接使用文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/iku_n/article/details/137832985

版权

文章介绍了如何在Vue项目中通过npm安装并引入dayjs库，实现日期时间的格式化、获取过去七天的时间，并展示了一个组件模板，实现实时显示当前时间和每秒更新的功能。

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

npm安装

npm install dayjs --save

导入到main.js

import dayjs from "dayjs"
Vue.prototype.dayjs = dayjs; //可以全局使用dayjs

实例

/* 时间格式化 */
this.dayjs().format('YYYY-MM-DD')  // 当前日期：年月日
this.dayjs().format("YYYY-MM-DD HH:mm:ss")  // 当前日期：年月日 时分秒
/* 获取过去七天时间 */
 for (let i = 6; i >= 0; i--) {
   let date = this.dayjs(this.dayjs()-24*60*60*1000*i).format("YYYY-MM-DD")
   console.log(date)
 }

功能实现，完整版

<template>
  <div id="app">
    {
  {this.datetime}}
  </div>
</template>
<script>
  export default {
    name: "app",
    data() {
      return {
        timer: '',
        datetime: ''
      }
    },
    mounted() {
      /* 每秒定