2020 Vue 自定义格式化时间的全局过滤器(分析实例+亲测有效)

文章目录

        • 1、背景
        • 2、过滤器源码
        • 2.1 使用
        • 2.2 效果
        • 3、结束语
        • 点击进入Vue❤学习专栏~

1、背景

  • 在做Vue项目的时候,需要格式化时间,于是就学习了一下过滤器的使用,直接贴上源码即可使用

2、过滤器源码

将源码在man.js直接粘贴即可使用了

// 自定义格式化时间的全局过滤器
Vue.filter('dateFormat',function(originVal){
  const dt =new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
  const d = (dt.getDate() +'').padStart(2,'0')
  //padStart(2,'0') 意思是不足两位自动补0
  const hh = (dt.getHours() + '').padStart(2,'0')
  const mm = (dt.getMinutes() + '').padStart(2,'0')
  const ss = (dt.getSeconds() + '').padStart(2,'0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

2.1 使用

由于我是使用了element-ui里面的table表格,所以采用作用域插槽的方式渲染每一行,具体使用如下图所示:
2020 Vue 自定义格式化时间的全局过滤器(分析实例+亲测有效)_第1张图片

2.2 效果

最终结果,我们创建时间列就渲染成功了~
2020 Vue 自定义格式化时间的全局过滤器(分析实例+亲测有效)_第2张图片

3、结束语

Vue全家桶开发电商管理系统码云地址,欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop


最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
在这里插入图片描述

点击进入Vue❤学习专栏~

学如逆水行舟,不进则退

你可能感兴趣的:(Vue全家桶系列)