如何使用moment.js以及filter实现vue中的时间格式化过滤器

  1. 第一步,下载moment.js,可以通过 npm install moment --save 命令进行下载

  2. 第二步,创建 filter 文件,引入 momentvue,代码如下所示:

import Vue from 'vue'
import moment from 'moment'
  1. 第三步,通过 Vue.filter 命令自定义过滤器,创建 date-format 时间格式化过滤器,写出相应的函数,传入 value 以及 formatStr 格式化字符串,最后返回 monent去传值以及 format去传字符串就可以,代码如下所示:
// 自定义过滤器 date-format
Vue.filter('date-format', function (value, formatStr = 'YYYY-MM-DD HH:mm:ss') {
   return moment(value).format(formatStr)
})

  1. 第四步,在需要进行格式化时间的地方,去使用过滤器,代码如下所示:
<div class="time">{{ shop.time | date-format }}</div>
发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_42614080/article/details/103942084