1.main.js ,全局过滤器。方便使用

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/index.js'
import Vuex from 'vuex'

//引入axios
import axios from 'axios'
Vue.prototype.$ajax = axios
Vue.use(Vuex)

Vue.config.productionTip = false
//时间过滤器
Vue.filter('time',function (value) {
  return new Date(parseInt(value) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

补充。自定义时间过滤器,还是mainjs里

//时间过滤器
Vue.filter('time',function (value) {
  let cc = new Date(value*1000);
  return cc.toLocaleString();
})
Date.prototype.toLocaleString= function () {    //这里可以定义想要的类型
  return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分" + this.getSeconds() + "秒";
}


2.页面组件  html部分:使用     | t i m e

<ul class="detail" v-for="ietm in list">
          <li>洗衣-{{ietm.clothesType}}</li>
          <li>完结-{{ietm.serverState}}</li>
          <li>time:{{ietm.subTime|time}}</li>
        </ul>

补充。关于自定义过滤器,和美华时间格式


我们从接口获取的时间格式是这样的2016-06-12T06:17:35.453Z,很显然,这不是我们想要的效果.我们想要的效果应该是这样的 发表于2小时之前 这样的效果.怎么做呢?
我们需要一个函数,这个函数的作用是给他一段原始的字符串,然后返回一个我们想要的字符串.

function goodTime(str){
 var now = new Date().getTime(),
 oldTime = new Date(str).getTime(),
 difference = now - oldTime,
 result='',
 minute = 1000 * 60,
 hour = minute * 60,
 day = hour * 24,
 halfamonth = day * 15,
 month = day * 30,
 year = month * 12,

 _year = difference/year,
 _month =difference/month,
 _week =difference/(7*day),
 _day =difference/day,
 _hour =difference/hour,
 _min =difference/minute;
 if(_year>=1) {result= "发表于 " + ~~(_year) + " 年前"}
 else if(_month>=1) {result= "发表于 " + ~~(_month) + " 个月前"}
 else if(_week>=1) {result= "发表于 " + ~~(_week) + " 周前"}
 else if(_day>=1) {result= "发表于 " + ~~(_day) +" 天前"}
 else if(_hour>=1) {result= "发表于 " + ~~(_hour) +" 个小时前"}
 else if(_min>=1) {result= "发表于 " + ~~(_min) +" 分钟前"}
 else result="刚刚";
 return result;
}
 // 使用vue自定义过滤器把接口中传过来的时间进行整形
 Vue.filter('time', function (value) {
 return goodTime(value);
 })
 var vm = new Vue({
   el: '#app',
// 此处为接口返回的数据
   data: data
 });

补充:
js中处理时间戳。转为我们任何想要的:

得到后台从数据库中拿到的数据我们希望格式是  

                2016年10月25日 17时37分30秒 或者 2016/10/25 17:37:30

然而我们前台得到的却是一段数字(时间戳,毫秒数)

                1477386005     

我们要将时间戳转化为我们想要的格式。

核心方法 :

1477386005是我从后台得到时间戳  (注意:有的时候得到的时间戳是已经乘以1000的)
var unixTimestamp = new Date( 1477386005*1000 ) ;
commonTime = unixTimestamp.toLocaleString();
 alert(commonTime);

这时候的结果是:

    

但是我希望转换为我自己想要的格式,就在本页面重写一下  toLocaleString()方法即可。

Date.prototype.toLocaleString = function() {
          return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分" + this.getSeconds() + "秒";
    };

   结果为:

    

或者其他想要的格式:

 

Date.prototype.toLocaleString = function() {
          return this.getFullYear() + "/" + (this.getMonth() + 1) + "/" + this.getDate() + "/ " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
    };

 

    结果为:

     





Logo

前往低代码交流专区

更多推荐