day.js时间库处理，封装成全局过滤器，基础使用步骤

最新推荐文章于 2024-05-28 15:46:39 发布
最新推荐文章于 2024-05-28 15:46:39 发布
阅读量555 收藏 2
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55333190/article/details/118930308
版权

day.js

1、 打开day.js官网
点击跳转
2、在首页点击开始使用
在这里插入图片描述
3、在终端下载到线上并导入
在这里插入图片描述
4、导入全局的语言配置
在这里插入图片描述
5、使用day.js 里面 的相对时间插件，它能将时间改成相对的时间格式
在这里插入图片描述
6、导入vue文件，创建一个全局过滤器就完成了
在这里插入图片描述
7、记得将刚写的dayjs模板导入到main.js,你不导入它里面的代码就不会执行，不执行那个全局过滤器也就不会生效

在这里插入图片描述

linwuji的摸爬人生
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-filter-date-format-Vue 2的简单日期时间过滤器。-Vue.js开发
05-27
@ vuejs-community / vue-filter-date-format用于Vue.js的简单日期时间过滤器从npm安装安装$ npm install @ vuejs-community / vue-filter-date @ vuejs-community / vue-filter-date-format简单日期时间Vue.js过滤器的安装从npm安装$ npm install @ vuejs-community / vue-filter-date-format并在您中注册Vue应用程序从“ vue”导入Vue； 从'@ vuejs-community / vue-filter-date-format'导入VueFilterDateFormat; Vue.use（VueFilterDateFormat）; 或使用“ vue”中的配置导入Vue在您的Vue应用程序中注册； 从'@ vuejs-community / vue-filter-date-format'导入VueFilterDateFormat; Vue.use（VueFilterDateFormat，{dayOf
dayjs过滤时间
weixin_46452975的博客
07-07 357
// 导入格式化时间的插件 import dayjs from ‘dayjs’ // 导入dayjs中的相对时间的插件 import relativeTime from ‘dayjs/plugin/relativeTime’ // 导入语言包，因为时间插件是英文的 import ‘dayjs/locale/zh-cn’ import Vue from ‘vue’ // 使用相对时间插件relativeTime dayjs.extend(relativeTime) dayjs.locale(‘zh-cn’).
dayjs 常用方法总结以及项目实战
最新发布
工作的日常记录和平凡的生活分享
05-28 1660
自定义格式化是 Day.js 的一个强大功能，它允许开发者根据特定的需求来定义日期时间的显示格式。定义格式：可以通过字符串模板定义自定义的日期时间格式。Day.js 将根据模板中的指令解析和显示日期。使用场景：自定义格式化特别适用于需要遵循特定格式标准或展示非标准日期时间格式的场景。自定义日期格式将日期显示为的格式。组合年月日和时间将输出日期和时间，如。包含星期信息将输出包含星期的日期，例如'28.05.2024 星期二'。自定义格式的应用非常灵活，可以根据不同的业务需求来调整日期时间的显示方式。
时间格式过滤封装----dayjs插件、Date格式化时间
tangtanglinli的博客
03-06 232
时间格式过滤封装----dayjs插件、Date格式化时间
Vue过滤器使用day.js
qq_46580571的博客
05-27 135
Vue种过滤器使用day.js
day.js配置过滤器及使用相对时间
qq_41792374的博客
07-03 1068
1.基于手脚架的话，先npm i dayjs 然后在utils文件夹下创建文件dayjs 引入到main.js入口，并在dayjs配置： dayjs.js里配置: 模板中使用：
day.js轻量级处理时间和日期JavaScript库
12-10
Day.js 是一个专门为JavaScript开发的轻量级时间日期处理库，它的主要目标是提供与Moment.js高度相似的API，使得开发者在使用时能快速上手，尤其对于那些熟悉Moment.js的人来说。Day.js的体积小，性能高效，这使得它...
Day.js 2kB的时间日期库 Moment.js 的 轻量化方案
06-29
Day.js 是一个轻量级的JavaScript时间日期处理库，它以 Moment.js 为设计蓝本，但体积更小，仅为2kB，对于那些对代码大小有严格要求的项目来说，是一个理想的替代方案。这个小巧的库提供了与 Moment.js 类似的API，...
day.js 插件，小程序滑动月份日历
10-20
day.js日历插件写的小程序滑动月份日历，打开就能看到效果。如果有问题。新建文件拷一份出来也可以。day.js文件一起打包在里面了。官方文档： https://day.js.org/docs/zh-CN/installation/installation
dayjs-website:.Day.js网站存储库
04-29
Day.js是一个轻量级的JavaScript时间日期处理库，它提供了与Moment.js类似的API，但体积更小，性能更高。 描述中的"具有相同现代API的Moment.js的2kB快速替代品"强调了Day.js的核心优势：它是Moment.js的一个轻量级...
案例:过滤器中使用dayjs.js格式化时间
m0_63400611的博客
05-11 134
需要先引入 dayjs.js,并且在其官方文档查看使用方法 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
在vue3中使用antd3.x版本全局化配置locale不生效的问题
lfYexun的博客
04-11 1016
在网上查了很多需要moment，但其实官网上已经改用了dayjs，按官网的例子配置即可。
vue 引用 dayjs(全局使用)
weixin_61256270的博客
02-24 2160
vue 引用 dayjs全局使用
Day.js的三种导入方式
qq_43372180的博客
06-19 2557
2.在main.js中全局导入 在main.js中需要 同时我们需要在原来的dayjs.js添加默认导出
dayjs
code_dream_wq的博客
11-18 4840
【代码】dayjs。
私有过滤器和全局过滤器的使用
qq_72760247的博客
10-12 265
私有过滤器和全局过滤器的使用
vue 全局引用dayjs（笔记）
qq_44872773的博客
03-27 2693
1、main.js引用 import Vue from 'vue' import App from './App.vue' import word from '@/components/Word' import axios from "axios"; import day from "dayjs"; Vue.prototype.axios=axios; Vue.prototype.dayjs=day; Vue.component('MyWord',word) Vue.config.production
dayjs一些常用封装
weixin_47346395的博客
06-08 2496
dayjs常用封装
日期格式化插件dayjs在vue中如何使用
qq_48294048的博客
10-12 2384
【代码】日期格式化插件dayjs在vue中如何使用。
vue时间戳转换成时间 全局过滤器
05-30
好的，你可以使用 Vue 的全局过滤器来实现时间戳转换成时间的功能。下面是一个示例： 在 main.js 中定义全局过滤器： ```javascript Vue.filter('dateFormat', function(value) { if (value) { var date = new Date(parseInt(value)); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } else { return ''; } }); ``` 在组件中使用： ```html <template> <div>{{ timestamp | dateFormat }}</div> </template> <script> export default { data() { return { timestamp: 1591910400000 }; } }; </script> ``` 以上代码中，`timestamp` 是一个时间戳，通过管道符 `|` 调用了全局过滤器 `dateFormat`，将时间戳转换成了具体的时间格式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值