JS结合Vue实现时间过滤器-filters

1. 实现时间过滤器需要 Vue.filter 对象，自定义过滤器的名称为 formateDate，后面就是传入的参数，data 就是传入需要的时间。
2. 通过new  Data()方法获取传入的日期对象，然后就通过这个日期对象获取具体的年月日，以及时分秒的值，最后再返回需要的日期格式，使用时间过滤器，代码如下：

1. js转换

静态页面，数据渲染 代码如下： 

<view class="info">
	<text>发表时间:{{detail.add_time | formateDate}}</text>
	<text>浏览:{{detail.click}}</text>
</view>

 在main.js 中定义全局时间过滤器   代码如下：

// 引入vue
import Vue from 'vue'

// 自定义时间的过滤器
Vue.filter('formateDate', function(date) {
  // 获取传入的日期时间
 const nDate = new Date(date)
  // 获取传入日期的年份
  const year = nDate.getFullYear();
  // 获取传入日期的月份，从0开始，加1到正常月份
  const month = (nDate.getMonth() + 1).toString().padStart(2,0);
  // 获取传入日期的日子
  const day = nDate.getDay().toString().padStart(2,0);

  // 获取传入日期的小时
  const hh = nDate.getHours().toString().padStart(2,0);
  // 获取传入日期的分钟
  const mm = nDate.getMinutes().toString().padStart(2,0);
  // 获取传入日期的秒数
  const ss = nDate.getSeconds().toString().padStart(2,0);

  // 返回日期格式
  return `${year}-${month }-${day} ${hh}:${mm}:${ss}`
})

比如    这种格式就可以用上面的方式转化为 年-月-日的格式。

2. moment.js

2.1 安装插件

npm i -S moment
or
yarn add -S moment

2.2 全局过滤器定义

main.js

import moment from "moment";
// 全局过滤器的定义
Vue.filter("global_filter", function(value, type = "YYYY-MM-DD hh:mm:ss") {
  return moment(value).format(type);
});

 2.3 组件使用

<div>
      全局过滤器：转换成日期格式
      <p>{{date | global_filter}}</p>
      <p>{{date | global_filter('YYYY/MM/DD')}}</p>
</div>

展示效果：