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`），此时，我们可以为过滤器提供一个可选的 格式字符串；