首先方便读者调试，安利一个实用的方法，打开codepen.io，在setting处引入vuejs官网上的开发版本，1.0.26版本
codepen.io 设置界面
之后开始写html和js，此处可最大化最小化编辑窗口
最大化最小化编辑窗口按钮
第一个需求：vue.js渲染时间戳该怎么处理?
<div id="app">
<span>需求创建时间{{createtime | time}}</span>
</div>
// vue 过滤器
Vue.filter('time', function (value) {
return new Date(parseInt(value) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
})
//创建vue实例
new Vue({
el:'#app',
data:function() {
return {
//需要转化的时间戳
createtime:1466248396
}
}
})
第二个需求：美化时间
我们从接口获取的时间格式是这样的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
});
