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

Posted 2023-01-03 fdxjava

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