vue3使用 dayjs
时间: 2023-11-08 17:02:45 浏览: 63
Vue 3是一个流行的JavaScript框架,Day.js是一个轻量级的JavaScript日期处理库。在Vue 3中使用Day.js可以非常方便地处理日期和时间。以下是在Vue 3中使用Day.js的简单步骤:
1. 首先,安装Day.js和它的插件。可以通过npm或yarn安装:
```bash
npm install dayjs
```
2. 在Vue组件中引入Day.js:
```javascript
import dayjs from 'dayjs';
```
3. 使用Day.js来处理日期和时间。下面是一些常见的Day.js用法示例:
```javascript
// 获取当前日期和时间
const now = dayjs();
// 格式化日期
const formattedDate = dayjs().format('YYYY-MM-DD');
// 获取两个日期之间的差异
const diff = dayjs('2022-01-01').diff('2021-01-01', 'year');
// 添加或减去时间
const newDate = dayjs().add(1, 'day');
const newTime = dayjs().subtract(1, 'hour');
// 检查日期是否在指定范围内
const isInRange = dayjs().isBetween('2021-01-01', '2022-01-01');
// 其他更多用法请参考Day.js文档:https://day.js.org/
```
4. 在Vue模板中使用Day.js。可以将Day.js实例挂载到Vue的原型上,以便在模板中直接使用:
```javascript
app.config.globalProperties.$dayjs = dayjs;
```
在模板中使用:
```html
<template>
<div>
<p>当前时间:{{ $dayjs().format('YYYY-MM-DD HH:mm:ss') }}</p>
</div>
</template>
```