【Vue学习笔记】过滤器(filter)格式化时间(时间戳)——用dayjs插件

Summer⊙

已于 2022-04-01 09:31:22 修改

阅读量2.3k

点赞数 1

分类专栏： Vue学习笔记文章标签： vue.js 学习前端 vue js

于 2022-03-25 17:13:23 首次发布

本文链接：https://blog.csdn.net/qq_44862029/article/details/123740339

版权

这篇博客介绍了如何在Vue项目中使用dayjs插件来格式化时间戳。首先展示了实现效果，然后指导从BootCDN下载并引入dayjs。接着详细讲解了定义和使用过滤器的语法，并强调过滤器不会改变原始数据，而是生成新的格式化数据。最后提到了参考资源。

摘要由CSDN通过智能技术生成

一.实现效果

在这里插入图片描述

二.去BootCDN下载dayjs插件

链接: BootCDN
链接: dayjs

三.引入dayjs

<script src="../js/dayjs.min.js"></script>

四.代码实现

<div class="root">
        <div id="root">
            <h2>显示格式化后的时间</h2>
            <!-- 计算属性实现 -->
            <h3>现在是：{
  {fmtTime}}</h3

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Summer⊙

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 学习笔记

weixin_43971312的博客

05-22

2277

VUE 学习笔记 1 简介 1.1 简介中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的

Vue学习笔记（尚硅谷天禹老师）

m0_67391907的博客

03-06

1223

Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者：尤雨溪 1.1.3. Vue的特点遵循MVVM模式编码简洁，体积小，运行效率高，适合移动/PC端开发它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联借鉴 Angular 的模板和数据绑定技术借鉴 React 的组件化和虚拟DOM

参与评论您还未登录，请先登录后发表或查看评论

dayjs.min.js

04-16

Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库

提升笔记效率：Logseq 媒体时间戳插件推荐

最新发布

gitblog_00230的博客

09-14

254

提升笔记效率：Logseq 媒体时间戳插件推荐 logseq-plugin-media-ts This plugin can generate timestamps for video, audio and Bilibili video, it takes you to the corresponding video/a...

过滤器格式化时间

littlefire_233的博客

10-12

244

// vue 过滤器 <div class="debug">{{states[0].time|date('yyyy-MM-dd mm')}}</div>

使用过滤器格式化时间

m0_68845470的博客

07-08

276

过滤器格式化时间

尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记（一）

weixin_44566194的博客

12-08

3165

本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点

Vue2学习笔记

lhg13592807238的博客

07-16

559

化他人笔记为自己笔记，本文根据其他博主笔记删减整合为适合自己的笔记，勿喷。自己看的没有很细心排版，勿喷

[Vue.js] 基础 -- 过滤器(格式化时间)

DeathDomain的博客

11-02

306

对日期进行格式化 date 要格式化的日期 format 进行格式化的模式字符串支持的模式字母 y : 年 M : 年中的月份(1-12) d : 月份中的天(1-31) h : 小时(0-23) m : 分(0-59) s : 秒(0-59) S : 毫秒(0-999) q : 季度(1-4) function dateFormat(date, format) { if (typeof date === "string") { var mts = date.matc

Vue.js使用filter自定义过滤器对时间进行格式化（javascript原生写法）

美奇软件开发工作室

04-09

2190

一、自定义date.js /** * 对Date的扩展，将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: ...

vue使用过滤器将时间戳格式化时间

qq_43628847的博客

04-26

2071

使用moment插件格式化。如果写成方法的话，则每个页面都要写这个方法。所以还有一种，定义全局过滤器，将时间戳格式化 在main.js中定义 Vue.filter('dateFormat', (dateStr, pattern) => { if(dateStr) { return moment(Number(dateStr)).format(pattern) } else return '' }) 我这里做了一下判断，如果后端给的是null或者是空字符串，则页面显示是空字符串，这样就不会显示

vue中使用day.js处理时间

weixin_51052779的博客

03-07

687

一、安装 npm install dayjs --save 二、main.js引用 import dayjs from 'dayjs' Vue.prototype.dayjs = dayjs// 可以全局使用dayjs 三、使用 this.dayjs().format('YYYY-MM-DD HH:mm:ss')// 获取当前时间官方文档地址：安装 | Day.js中文网 ...

自定义过滤器实现时间格式的转换

xiangxiang的博客

03-25

312

自定义过滤器实现时间格式的转换

Vue使用js实现时间格式化 filters过滤器

weixin_44296432的博客

12-20

607

time | dataFormat('yyyy.MM.dd hh:mm:ss') 时间的格式化过滤器 filters: { dataFormat (value, fmt) { let getDate = new Date(value) let o = { 'M+': getDate.getMonth() + 1, 'd+': ge...

Vue 过滤器的简单使用---实时显示格式化时间

cfgggg12的博客

08-23

【代码】Vue 过滤器的简单使用---实时显示格式化时间。

过滤器（格式化日期）

快乐学代码

05-03

231

过滤器（格式化日期）代码如下 <script> /** * 对日期进行格式化， * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有： * y:年, * M:年中的月份(1-12), * d:月份中的天(1-31), * h:小时(0-23), * m:分(0-59), * s:秒(0-59), * S:毫秒(0-999)