Vue项目中全局过滤器的使用（格式化时间）

Posted 2020-11-26 zhaohui-116

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue项目中全局过滤器的使用（格式化时间）相关的知识，希望对你有一定的参考价值。

过滤器格式化时间，借助moment插件

未格式化前如图

技术图片

步骤：

1.下载插件

import moment from ‘moment‘

2.main.js中引入插件

npm install moment --save

3.main.js中定义全局过滤器

Vue.filter(‘dataFilter‘,function (dataStr,patten = ‘YYYY-MM-DD HH:mm:ss‘) {
  return moment(dataStr).format(patten)
});

4.在需要格式化时间的组件中用管道符的形式调用

 <div class="cmtTitle">
            第{{item.id}}楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：{{ item.add_time | dataFilter }}
          </div>

以上是关于Vue项目中全局过滤器的使用（格式化时间）的主要内容，如果未能解决你的问题，请参考以下文章