日期格式化插件dayjs在vue中如何使用

1. 下载dayjs

cnpm install dayjs --save

2. 创建untils/formate.js

import dayjs from 'dayjs'
import rTime from 'dayjs/plugin/relativeTime'// 全局使用中文
dayjs.locale('zh-cn')// 对时间进行格式化
export function formatTime(data = new Date(), type = 'YYYY-MM-DD') {return dayjs(data).format(type)
}// 其它例如相对时间，需要单独配置它自己的插件才可以使用
dayjs.extend(rTime)export const relativeTime = value => {return dayjs().to(dayjs(value))
}export default {formatTime,relativeTime
}

3. 挂在全局，封装过滤器，main.js

import { formatTime, relativeTime } from './utils/formate'Vue.prototype.$formatTime = formatTime
Vue.prototype.$relativeTime = relativeTime// 过滤器
Vue.filter('relativeTime', relativeTime)
Vue.filter('formatTime', formatTime)

4. 在js环境中使用

this.$formatTime(new Date(),'YYYY-MM-DD')

5. 在vue模板中使用过滤器

 {{new Date()|formatTime}}{{new Date('2022-01-01')|relativeTime}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！