重读vue电商网站41之自定义格式化时间的全局过滤器

简介: 重读vue电商网站41之自定义格式化时间的全局过滤器

文章标签格式化时间自定义javascript文章分类JavaScript前端开发阅读数46

在 main.js 入口文件全局注册格式化时间的过滤器,代码如下所示:

Javascript

// 自定义格式化时间的全局过滤器
 Vue.filter('dataFormat', function(originVal) {
 const dt = new Date(originVal)
 const year = dt.getFullYear()
 const mon = (dt.getMonth() + 1 + '').padStart(2, '0')
 const day = (dt.getDate() + '').padStart(2, '0')
 const hh = (dt.getHours() + '').padStart(2, '0')
 const mm = (dt.getMinutes() + '').padStart(2, '0')
 const ss = (dt.getSeconds() + '').padStart(2, '0')
 return `${year}-${mon}-${day} ${hh}:${mm}:${ss}`
 })

在我们的组件当中,通过 | 来给我们的时间添加一个过滤器

图片.png

最终实现效果如下图所示:

图片.png

 


相关文章
|
28天前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
65 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
28天前
|
JavaScript
Vue学习之--------Vue中自定义插件(2022/8/1)
这篇文章介绍了Vue中自定义插件的基本概念和实际应用,包括插件的定义、在`main.js`中使用`Vue.use()`引入插件,并通过代码实例展示了如何创建包含全局过滤器、指令和混入的插件,以及如何在Vue组件中使用这些自定义功能。同时,文章还解释了什么是mixin(混入)以及它的使用方式。
Vue学习之--------Vue中自定义插件(2022/8/1)
|
1月前
|
前端开发 API
自定义 Hooks 在 Vue3 中的应用和重要性
自定义 Hooks 在 Vue3 中的应用和重要性
|
1月前
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
|
12天前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
29 0
|
28天前
|
JavaScript
Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)
这篇文章介绍了Vue中过滤器(filters)的概念、使用方式和代码实现,通过实例演示了如何对显示数据进行格式化处理。
|
1月前
|
JavaScript 前端开发 Shell
实现在vue中自定义主题色彩切换
实现在vue中自定义主题色彩切换
29 0
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
2天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
31 11
|
7天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题