小知识点 - Vue中利用filter在前端处理由后端传来的日期格式（使用了moment.js）

引言

在项目中，经常要对日期格式进行处理，不管是在前端展示，还是存入数据库，都有各自的处理方式， 之前我看到一个解决方案是利用ElementUI里的formatter。那只是一种适用于ElementUI的解决方案。对于哪种方式如何实现，我有一篇博文来说明，URL：https://blog.csdn.net/wk14444/article/details/105113580

本文着重叙述在前端来处理后端传递来的日期格式

数据准备

假设我们后端返回的json串如下：

{
	name: 'zhangsan',
	age: 18,
	birthday: "Mar 28, 2020 12:00:00 AM"
}

如果前端对 birthday这个字段不加处理，则会原样输出，非常影响体验。

使用Vue中的filter处理日期格式

我们可以利用Vue的过滤器组件来解决日期格式，同时为了方便（懒），我们引用了moment.js。
步骤：

1. 引入moment.js

   <!-- js文件的路径要根据自己的填写 -->
   <script src="/js/moment.js"></script>
   

2. 定义全局过滤器或者私有过滤器，这里我以全局过滤器为例：

   <script>
   	/**
        * 定义Vue全局过滤器：日期格式化
        * @param date 要格式化的日期
        * @param pattern 指定格式
        */
       Vue.filter('dateFormat', function (date, pattern = 'YYYY-MM-DD') {
           return moment(date).format(pattern);
       });
   </script>
   

3. 在需要展示的位置，使用过滤器

   <!-- 	
   	如果想要指定格式，在dateFormat后面携带pattern参数即可
   	例如：{{birthday | dateFormat('YYYY-MM')}}
    -->
   <span>
         生日：{{birthday | dateFormat}}
   </span>
   

   这里我们使用了vue的插值表达式 {{变量名}}
   值得注意的是，vue的filter组件只能用在插值表达式和 v-bind中
   用法： 使用管道符：| 后面加上过滤器的名称

此时再看前台展示的数据，就已经自动处理成了我们需要的字段啦~

附带

moment.js的安装命令：

npm install moment --save

只需要将里面核心的文件moment.js引入即可使用。