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'//引入axiosimport axios from 'axios'Vue.
·
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(); };
结果为:
更多推荐
已为社区贡献22条内容
所有评论(0)