处理相对时间(Day.js、Moment.js)(案例:结合vue的过滤器使用)

推荐两个第三方库:

  1. Moment.js
  2. Day.js

两者都是专门用于处理时间的 JavaScript 库,功能差不多,因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些,因为它采用了插件化的处理方式。

Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样,如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。

Day.js 可以运行在浏览器和 Node.js 中。
🕒 和 Moment.js 相同的 API 和用法
💪 不可变数据 (Immutable)
🔥 支持链式操作 (Chainable)
🌐 国际化 I18n
📦 仅 2kb 大小的微型库
👫 全浏览器兼容

下面是具体的操作流程。

Dayjs官方文档

安装 dayjs:

npm install dayjs --save

创建封装 utils/dayjs.js:

import Vue from 'vue'
import dayjs from 'dayjs'// 加载中文语言包
import 'dayjs/locale/zh-cn'import relativeTime from 'dayjs/plugin/relativeTime'// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)// 配置使用中文语言包
dayjs.locale('zh-cn')// 全局过滤器:处理相对时间
Vue.filter('relativeTime', value => {return dayjs().from(dayjs(value))
})

在 main.js 中加载初始化:

import './utils/dayjs'

使用过滤器:

<span>{{ article.pubdate | relativeTime }}</span>

在这里插入图片描述
在这里插入图片描述

案例:结合vue的过滤器使用

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

下载 嵌入式qt实战教程pdf_Qt之JSON教程-实战篇

以实战例子讲述JSON三兄弟的后续故事。实战一&#xff1a;发送JSON网络请求作为JSON老大哥的QJsonValue自知对面的大户人家妹子貌美如花&#xff0c;心里已经打起算盘&#xff0c;先下手为强&#xff0c;后下手遭殃。决定显示下自己的家底&#xff0c;想起这件事&#xff0c;老…

Vue移动端项目——搜索联想建议功能的实现(结合watch属性和使用lodash防抖节流)

搜索联想建议 1. 基本思路&#xff1a; 当搜索框输入内容的时候&#xff0c;请求加载联想建议的数据 将请求得到的结果绑定到模板中 2. 基本功能 一、将父组件中搜索框输入的内容传给联想建议子组件 二、在子组件中监视搜索框输入内容的变化&#xff0c;如果变化则请求获取…

.net get set 初始化_.NET项目升级:可为空引用

(给DotNet加星标&#xff0c;提升.Net技能)转自&#xff1a;波多尔斯基cnblogs.com/podolski/p/12692888.html前言C#8引入了新特性&#xff1a;可为空引用https://docs.microsoft.com/zh-cn/dotnet/csharp/nullable-references这个功能个人觉得挺好的&#xff0c;能够非常明确的…

用GDB排查Python程序故障

某Team在用Python开发一些代码&#xff0c;涉及子进程以及设法消除僵尸进程的需求。实践中他们碰上Python程序非预期退出的现象。最初他们决定用GDB调试Python解释器&#xff0c;查看exit()的源头。我听了之后&#xff0c;觉得这个问题应该用别的调试思路。帮他们排查这次程序故…

解决后端返回数据中的大数字问题(使用第三方包json-bigint )

JavaScript 能够准确表示的整数范围在-2^53到2^53之间&#xff08;不含两个端点&#xff09;&#xff0c;超过这个范围&#xff0c;无法精确表示这个值&#xff0c;这使得 JavaScript 不适合进行科学和金融方面的精确计算。 Math.pow(2, 53) // 90071992547409929007199254740…

java 静态代码块_关于Java你不知道的那些事之代码块

前言普通代码块&#xff1a;在方法或语句中出现的{}&#xff0c;就被称为代码块静态代码块&#xff1a;静态代码块有且仅加载一次&#xff0c;也就是在这个类被加载至内存的时候普通代码块和一般语句执行顺序由他们在代码中出现的次序决定&#xff0c;先出现先执行代码一/**对于…

Vue项目开发过程中解决跨域问题(vue.config.js结合axios)

一、问题描述 在本地开发过程中&#xff0c;调用后端提供的接口获取数据将获取的数据渲染到页面中&#xff0c;但是浏览器报错&#xff1a; // 控制台报错信息 Access to XMLHttpRequest at http://x.x.x.x/app/v1_0/user/followings from origin http://localhost:8080 has…

WebSocket实现实时通信

WebSocket 是一种数据通信协议&#xff0c;也是用于客户端和服务端数据通信&#xff0c;类似于我们常见的 http 既然有 http&#xff0c;为啥还要 WebSocket http 通信是单向的 请求 响应 没有请求也就没有响应 初次接触 WebSocket 的人&#xff0c;都会问同样的问题&#xf…

使用socket.io搭建一个实时聊天机器人

一、安装socket.io npm i socket.io --save二、使用 第一种&#xff1a;服务端使用原生node // 创建http服务器 const http require(http) var fs require(fs) const app http.createServer()app.on(request, (req, res) > {fs.readFile(__dirname /index.html, funct…

真随机和伪随机区别_用骰子DIY真随机助记词 | 火星号精选

免责声明&#xff1a;本文旨在传递更多市场信息&#xff0c;不构成任何投资建议。文章仅代表作者观点&#xff0c;不代表火星财经官方立场。小编&#xff1a;记得关注哦

EasyDarwin开源流媒体服务器性能瓶颈分析及优化方案设计

EasyDarwin现有架构介绍 EasyDarwin的现有架构对网络事件的处理是这样的&#xff0c;每一个Socket连接在EasyDarwin内部的对应存在形式就是一个Session&#xff0c;不论是RTSP服务对应的RTSPSession&#xff0c;还是HTTP服务对应的HTTPSession&#xff0c;都是一个继承自Task类…

Vue 中的组件缓存

一、介绍 先来看一个问题&#xff1f; 从首页的区块链模块切换到文章详情页面&#xff0c;再从文章详情页面回到首页&#xff0c;我们发现首页重新渲染原来的状态没有了&#xff0c;又回到了推荐模块。 首先&#xff0c;这是正常的状态&#xff0c;并非问题&#xff0c;路由…

SQLlite 分页

如果我要去11-20的Account表的数据 Select * From Account Limit 9 Offset 10; 以上语句表示从Account表获取数据&#xff0c;跳过10行&#xff0c;取9行 嗯&#xff0c;我觉得这个特性足够让很多的web中型网站使用这个了。 也可以这样写 select * from account limit10,9和上面…

thief book怎么用_战略管理工具箱--30个好用的战略管理好工具

-原创转载请告知-十年多年前&#xff0c;在上海做咨询的时候&#xff0c;曾经在书店买了一本《战略管理工具箱》的Poket小书&#xff0c;一直看一直看&#xff0c;里面包含常用的战略管理工具&#xff08;30个&#xff09;&#xff0c;虽然不用都用上&#xff0c;用其中几个常用…

Vue中使用axios的响应拦截器处理请求失败的情况(处理token过期问题)以及 登录成功跳转回原来页面问题

参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态代码都会触发此函数&#xff0c;这里主要用于处理响应数据response > {return response},// 任何超出2xx范围的状态码都会触发此函数&#xff0…

cocoapods 命令

1.使用CocoaPods a 新建一个项目&#xff0c;名字cocoapods b 终端中&#xff0c;cd到项目总目录&#xff08;直接拖过来&#xff09; [objc] copy? cd /Users/pengjian/Desktop/cocoapodsc 建立Podfile&#xff08;配置文件&#xff09; 接着上一步&#xff0c;终端输入 v…

Vue项目中使用 路由导航守卫 处理页面的访问权限

参考Vue-Router官方文档 Vue-Router导航守卫 效果展示 1、给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性 { // 小智同学name: user-chat,path: /user/chat,component: () > import(/views/user-chat),meta: { requiresAuth: true } },2、通过路由拦截器…

失败,因为你其实太过傲慢

因为你太过傲慢&#xff0c;不肯放低姿态去向他人学习&#xff0c;勤加练习&#xff0c;所以失败。转载于:https://www.cnblogs.com/panie2015/p/5667464.html

Uniapp学习笔记(数据展示、数据循环、条件编译、计算属性、组件的使用、组件插槽、生命周期)

1.项目准备 1.1开发方式 uni-app为我们提供2种开发方式&#xff1a; 使用DCloud公司提供HBuilderX工具来快速开发&#xff1b; 使用脚手架来快速开发&#xff08;我们这次项目使用此方式&#xff09;&#xff1b; 1.2脚手架搭建项目 全局安装&#xff0c;如果你以前安装过…

word图片嵌入式为何只能看到一部分_Word排版的正确姿势!(Word论文排版教学)...

Hello&#xff0c;最近正值着手写毕业论文的初期&#xff0c;趁着这个时间点&#xff0c;我做了一个简易的&#xff0c;简单的&#xff0c;0基础的Word论文排版教学&#xff0c;帮助你在撰写论文的时候不再花费大量的时间浪费在调整格式里。初次做视频&#xff0c;难免有错误&a…