vuejs时间处理

首先方便读者调试，安利一个实用的方法，打开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
 });