首先方便讀者調(diào)試褒纲，安利一個(gè)實(shí)用的方法，打開codepen.io模孩，在setting處引入vuejs官網(wǎng)上的開發(fā)版本付翁，1.0.26版本
codepen.io 設(shè)置界面
之后開始寫html和js简肴，此處可最大化最小化編輯窗口
最大化最小化編輯窗口按鈕
第一個(gè)需求：vue.js渲染時(shí)間戳該怎么處理?
<div id="app">
<span>需求創(chuàng)建時(shí)間{{createtime | time}}</span>
</div>
// vue 過濾器
Vue.filter('time', function (value) {
return new Date(parseInt(value) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
})
//創(chuàng)建vue實(shí)例
new Vue({
el:'#app',
data:function() {
return {
//需要轉(zhuǎn)化的時(shí)間戳
createtime:1466248396
}
}
})
第二個(gè)需求：美化時(shí)間
我們從接口獲取的時(shí)間格式是這樣的2016-06-12T06:17:35.453Z,很顯然,這不是我們想要的效果.我們想要的效果應(yīng)該是這樣的 發(fā)表于2小時(shí)之前 這樣的效果.怎么做呢?
我們需要一個(gè)函數(shù),這個(gè)函數(shù)的作用是給他一段原始的字符串,然后返回一個(gè)我們想要的字符串.
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= "發(fā)表于 " + ~~(_year) + " 年前"}
else if(_month>=1) {result= "發(fā)表于 " + ~~(_month) + " 個(gè)月前"}
else if(_week>=1) {result= "發(fā)表于 " + ~~(_week) + " 周前"}
else if(_day>=1) {result= "發(fā)表于 " + ~~(_day) +" 天前"}
else if(_hour>=1) {result= "發(fā)表于 " + ~~(_hour) +" 個(gè)小時(shí)前"}
else if(_min>=1) {result= "發(fā)表于 " + ~~(_min) +" 分鐘前"}
else result="剛剛";
return result;
}
// 使用vue自定義過濾器把接口中傳過來的時(shí)間進(jìn)行整形
Vue.filter('time', function (value) {
return goodTime(value);
})
var vm = new Vue({
el: '#app',
// 此處為接口返回的數(shù)據(jù)
data: data
});
