首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Day.js时间转化插件

Vue中使用Day.js时间转化插件详细教程(附Vue2与Vue3写法)

2025-05-27 09:52:40 作者：码上前端

Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间,这篇文章主要介绍了Vue中使用Day.js时间转化插件的相关资料,需要的朋友可以参考下

一、引言

在前端开发中，日期和时间的处理是常见需求。Day.js 是一个轻量级的 JavaScript 日期处理库，与 Moment.js 功能类似，但体积更小、速度更快。在 Vue 项目里，使用 Day.js 能方便地进行日期格式化、计算、比较等操作。不过，由于 Vue 2 和 Vue 3 在语法和架构上存在差异，在这两个版本中使用 Day.js 的方式也有所不同。下面我们就分别介绍在 Vue 2 和 Vue 3 中如何使用 Day.js 插件。

二、在 Vue 2 中使用 Day.js

2.1 安装 Day.js

首先，需要在项目中安装 Day.js。可以使用 npm 或 yarn 进行安装：

npm install dayjs --save
# 或者
yarn add dayjs

2.2 全局引入和使用

在 Vue 2 里，通常会在入口文件（如 main.js）中全局引入 Day.js，这样在所有组件中都能使用。

// main.js
import Vue from 'vue';
import App from './App.vue';
import dayjs from 'dayjs';

// 定义一个全局过滤器用于日期格式化
Vue.filter('formatDate', (value, format = 'YYYY-MM-DD') => {
  return dayjs(value).format(format);
});

new Vue({
  render: h => h(App)
}).$mount('#app');

在上述代码中，我们定义了一个名为 formatDate 的全局过滤器，它接收一个日期值和一个可选的格式字符串作为参数，使用 Day.js 对日期进行格式化。

2.3 在组件中使用过滤器

在组件的模板中，可以直接使用这个全局过滤器。

<template>
  <div>
    <p>格式化后的日期: {{ currentDate | formatDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  }
};
</script>

2.4 局部使用 Day.js

除了全局引入，也可以在单个组件中局部引入 Day.js

<template>
  <div>
    <p>格式化后的日期: {{ formattedDate }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  computed: {
    formattedDate() {
      return dayjs(this.currentDate).format('YYYY-MM-DD');
    }
  }
};
</script>

三、在 Vue 3 中使用 Day.js

3.1 安装 Day.js

同样，先使用 npm 或 yarn 安装 Day.js：

npm install dayjs --save
# 或者
yarn add dayjs

3.2 全局引入和使用

在 Vue 3 中，结合 createApp 创建应用实例，可以在 main.js 中全局引入 Day.js 并定义全局属性或指令。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import dayjs from 'dayjs';

const app = createApp(App);

// 定义全局属性
app.config.globalProperties.$dayjs = dayjs;

app.mount('#app');

在上述代码中，我们将 Day.js 挂载到全局属性 $dayjs 上，这样在所有组件中都可以通过 this.$dayjs 来使用 Day.js。

3.3 在组件中使用全局属性

<template>
  <div>
    <p>格式化后的日期: {{ formattedDate }}</p>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

const { appContext } = getCurrentInstance();
const dayjs = appContext.config.globalProperties.$dayjs;

const currentDate = new Date();
const formattedDate = dayjs(currentDate).format('YYYY-MM-DD');
</script>

3.4 局部使用 Day.js

也可以在单个组件中直接局部引入 Day.js。

<template>
  <div>
    <p>格式化后的日期: {{ formattedDate }}</p>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';

const currentDate = new Date();
const formattedDate = dayjs(currentDate).format('YYYY-MM-DD');
</script>

四、对比总结

4.1 引入方式

Vue 2：通过 Vue.filter 定义全局过滤器，或者在组件中直接引入使用。
Vue 3：使用 createApp 创建应用实例后，通过 app.config.globalProperties 挂载全局属性，也可在组件中直接引入。

4.2 组件使用方式

Vue 2：在选项式 API 中，使用 this 访问全局过滤器或在计算属性、方法中使用 Day.js。
Vue 3：在 Composition API 里，使用 getCurrentInstance 获取实例上下文来访问全局属性，或者直接在 setup 函数中局部引入使用。

4.3 灵活性

Vue 2：基于选项式 API，结构相对固定，在处理复杂逻辑时可能不够灵活。
Vue 3：Composition API 提供了更高的灵活性，代码组织更模块化，更易于复用和维护。

结语

无论是 Vue 2 还是 Vue 3，Day.js 都能很好地满足日期和时间处理的需求。在 Vue 2 中，可以通过全局过滤器或局部引入的方式使用 Day.js；在 Vue 3 中，则可以借助全局属性或局部引入来实现。开发者可根据项目的具体情况和个人喜好，选择合适的使用方式。如果你在使用 Day.js 时遇到任何问题或有不同的使用经验，欢迎在评论区留言分享。希望本文能帮助你在 Vue 项目中更好地使用 Day.js。

到此这篇关于Vue中使用Day.js时间转化插件的文章就介绍到这了,更多相关Vue Day.js时间转化插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！