vue.js处理时间

来源:互联网 发布:剑三萝莉精致捏脸数据 编辑:程序博客网 时间:2024/05/20 05:10

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'//引入axiosimport axios from 'axios'Vue.prototype.$ajax = axiosVue.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();    };

 

    结果为:

     





原创粉丝点击