在 Vue.js 的开发中，处理日期时间是非常常见的需求。而随着项目规模的增大，我们需要更加高效和精确地处理日期时间。这时，day.js 这个轻量级的 JavaScript 日期库就成为了我们的不二选择。本文将详细介绍在 Vue.js 中如何使用 day.js 处理日期时间，并给出实用的示例代码。
day.js 简介
day.js 是一个轻量级的 JavaScript 日期库，它的 API 设计类似于 Moment.js，但是它的体积只有 2KB，而 Moment.js 的体积则超过了 50KB。day.js 支持多种日期格式的解析和格式化，以及日期的加减、比较、计算等操作。
安装和使用
day.js 可以通过 npm 安装：
npm install dayjs --save
然后在 Vue.js 中使用：
import dayjs from 'dayjs'
此外，day.js 还提供了一些插件，如相对时间、UTC 时间、时区等，可以根据需要选择安装和使用。
解析和格式化日期
day.js 可以解析多种日期格式的字符串，如 ISO 格式、RFC 2822 格式、Unix 时间戳等。例如：
dayjs('2019-06-01').format('YYYY-MM-DD') // '2019-06-01'
dayjs('2019-W22-6').format('YYYY-MM-DD') // '2019-06-01'
dayjs('1559347200000').format('YYYY-MM-DD') // '2019-06-01'day.js 的格式化字符串与 Moment.js 类似，可以使用各种占位符来表示年、月、日、小时、分钟、秒等。例如：
dayjs().format('YYYY-MM-DD HH:mm:ss') // '2022-01-01 00:00:00'处理日期的加减、比较、计算等操作
day.js 提供了丰富的 API 来进行日期的加减、比较、计算等操作。例如：
dayjs().add(1, 'day').format('YYYY-MM-DD') // '2022-01-02'
dayjs().subtract(1, 'month').format('YYYY-MM-DD') // '2021-12-01'
dayjs().isBefore(dayjs('2022-01-01')) // false
dayjs().isSame(dayjs('2022-01-01'), 'day') // true
dayjs().diff(dayjs('2022-01-01'), 'day') // -1这些 API 都非常直观和易于理解，可以轻松地实现各种日期操作的需求。
在 Vue.js 中使用 day.js
在 Vue.js 中使用 day.js，我们可以将 day.js 封装成一个 Vue 插件，以便在全局和组件中使用。例如：
import Vue from 'vue'
import dayjs from 'dayjs'
Vue.use({
install(Vue) {
Vue.prototype.$dayjs = dayjs
}
})然后在组件中使用：
export default {
data() {
return {
date: this.$dayjs().format('YYYY-MM-DD')
}
}
}这样，我们就可以在组件中方便地使用 day.js 进行日期处理了。
实用示例
下面给出一些实用的示例代码，以便更好地理解 day.js 的使用。
获取当前时间
this.$dayjs().format('YYYY-MM-DD HH:mm:ss')获取指定时间的时间戳
this.$dayjs('2022-01-01').valueOf()计算两个日期之间的天数
this.$dayjs('2022-01-01').diff(this.$dayjs('2021-12-01'), 'day')格式化日期
this.$dayjs('2022-01-01').format('YYYY-MM-DD')获取当前时间的相对时间
this.$dayjs().fromNow()
总结
day.js 是一个轻量级的 JavaScript 日期库，它的 API 设计类似于 Moment.js，但是它的体积只有 2KB，而 Moment.js 的体积则超过了 50KB。day.js 支持多种日期格式的解析和格式化，以及日期的加减、比较、计算等操作。在 Vue.js 中使用 day.js，我们可以将 day.js 封装成一个 Vue 插件，以便在全局和组件中使用。通过本文的介绍和示例代码，希望可以帮助大家更好地理解和使用 day.js。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656a88e9d2f5e1655d2f124b