应用场景

在项目中，有很多地方都需要展示后台传递的时间数据。但是一般后台传递过来的都是时间戳格式，

但是在前台我们不能直接将后台接收的数据直接渲染到前台页面。我们需要做一次处理（如下图格式）

在评论组件中先定义一个过滤器showDate

1、定义过滤器

  filters: {
		showDate: function (value){
               // 将时间戳转化为date对象
               const date = new Date(value*1000);
      }
    }

2、在需要处理格式的地方使用过滤器showDate

commentInfo.created 是我从后台接收的时间戳

 <span class="date">{{commentInfo.created | showDate}}</span>

3、 封装一个自定义格式的方法

因为这种需求在项目中应用的地方太多了，而且有时候需要在前台展示的时间格式yyyy-MM-dd-hh:mm:ss或者yyyy-MM-dd-hh，所以我们需要封装一个方法formatDate，这样我们在别的页面或者项目中可以直接拿过来用。

1、新建一个文件

在 common文件中新建一个utils.js文件（文件夹和文件名随便取，这两个名字是我项目中使用的）

使用正则表达式实现

  export function formatDate(date, fmt) {
          //1.获取年份 y+用于不确定传入y数量的场景
          //2019
          //yy -19
          //yyyy -2019
          //y -9
          //RegExp.$1代表匹配到的yyyy,substr做截取，根据传入的fmt
          if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
          }

          //2.
          let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
          };
          for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
              let str = o[k] + '';
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
            }
          }
          return fmt;
        };
        
        function padLeftZero (str) {
            // '00'+'4'='004'然后做截取
          return ('00' + str).substr(str.length);
        };

4、在自定义过滤器中使用封装好的方法formatDate

1、在评论组件中导入

 import {formatDate} from "@/common/utils";

2、将return formatDate(date, 'yyyy-MM-dd-hh:mm:ss')加入到自定义过滤器中

  filters: {
		  showDate: function (value) {
        // 将时间戳转化为date对象
        const date = new Date(value*1000);
        return formatDate(date, 'yyyy-MM-dd-hh:mm:ss')
      }
    }

formatDate() 使用方法

formatDate(date, 'yyyy-MM-dd-hh:mm:ss')第二个参数是想要展示的格式

5、formatDate的格式实例

• formatDate(date, 'yyyy-MM-dd-hh:mm:ss')

• formatDate(date, 'yyyy-MM-dd-hh')

• formatDate(date, 'yy-M-dd-hh')

使用方式大致就是上面的步骤，如果有什么疑问的话欢迎评论