vue.js處理時間

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();
    };      

　　　　結果為：