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