Vue---定义全局过滤器---时间格式化

// 1. 导入Vue
import Vue from 'vue'
// 导入格式化时间的模块
import moment from 'moment'

// 定义全局的时间过滤器
Vue.filter('dateFormat', function (dateStr, formatStr = 'YYYY-MM-DD HH:mm:ss') {
  // 在过滤器的处理函数中,最后,必须 return 一个东西,这样,才是一个合法的过滤器
  return moment(dateStr).format(formatStr)
})

使用

  <span>发表时间:{{ item.add_time | dateFormat }}</span>

  也可以自定义:{{ item.add_time | dateFormat('YYYY-MM-DD') }}

## 定义全局的过滤器来格式化时间字符串
 1. 经过分析,整个项目中,许多组件都需要格式化时间,因此,推荐定义为全局的时间过滤器;
 2. 定义全局过滤器的语法:`Vue.filter('dateFormat', function(dataStr){})`
 3. 调用过滤器的语法:`<span>{{ item.add_time | dateFormat }}</span>`
 4. 这个时间过滤器,如何去格式化时间呢?比较方便的方式,是借助与第三方的`moment`插件
 5. 这个全局过滤器,定义到哪个文件中呢?
 6. 在设计时间过滤器的时候,为了提高用户体验度(可能有的用户想要 最全的`年-月-日 时:分:秒`, 有的用户只想要`YYYY-MM-DD`),此时,我们可以为过滤器提供一个可选的 格式字符串;
原文地址:https://www.cnblogs.com/fdxjava/p/11634612.html