<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="Vue.2.6.10.js"></script>
</head>
<body>
<!-- 一般在服務端的存儲時間格式是unix時間戳，如1483200000，本實例來實現這樣一個自定義指令v-time，將表達式傳入的時間戳轉換為相對時間 -->
<div id="app1">
<div v-time="timeNow"></div>
<div v-time="timeBefore"></div>
<input type="text" :value="test" @input="changeTest">
<p v-time="test"></p>
<p>{{ test }}</p>
</div>
</body>
<script>
//為了使判斷邏輯更簡單，統一使用時間戳進行大小判斷，聲明一個對象Time，將它們都封裝在里面
var Time = { //獲取當前時間戳
getUnix:function(){ var date = new Date(); return date.getTime(); }, //獲取今天0點0分0秒時間戳
getTodayUnix:function(){ var date = new Date(); date.setHours(0); date.setMinutes(0); date.setSeconds(0); date.setMilliseconds(0); return date.getTime(); }, //獲取今年一月一日0點0分0秒的時間戳
getYearUnix:function(){ var date = new Date(); date.setMonth(0); date.setDate(0); date.setHours(0); date.setMinutes(0); date.setSeconds(0); date.setMilliseconds(0); return date.getTime() }, //獲取標准的年月日
getLastDate:function(time){ var date = new Date(time);//傳入的是unix時間戳
var month = date.getMonth()+1 < 10 ? '0'+ (date.getMonth()+1):date.getMonth()+1; var day = date.getDate() < 10 ? '0' + (date.getDate()):date.getDate(); return date.getFullYear() + '-' + month + '-' + day; }, //格式化時間
getFormatTime:function(timestamp){ var now = this.getUnix();//調用這個對象的2這個方法
var today = this.getTodayUnix();//今天0點時間戳
var year = this.getYearUnix(); var timer = (now - timestamp) / 1000;//轉換為秒級時間戳
var tip = ''; if(timer <= 0){ tip='剛剛' }else if(Math.floor(timer/60) <= 0){
tip='剛剛' }else if(timer < 3600){ tip=Math.floor(timer/60) + '分鍾前'
}else if(timer >= 3600 && (timestamp - today >= 0)){ tip=Math.floor(timer/60) + '小時前'
}else if(timer/86400 <= 31){
tip = Math.ceil(timer/86400) + '天前'
}else{ tip=this.getLastDate(timestamp) }; return tip; } }; Vue.directive('time',{ bind:function(el,binding){ console.log(el,binding); el.innerHTML = Time.getFormatTime(binding.value); el._timeout_ = setInterval(function(){ el.innerHTML = Time.getFormatTime(binding.value); },60000)// 每分鍾觸發一次
}, update:function(el,binding){ el.innerHTML = Time.getFormatTime(binding.value); }, unbind:function(el){ clearInterval(el._timeout_); delete el._timeout_; } }) // console.log(new Date(1488930695721));
var app1 = new Vue({ el:"#app1", data:{ timeNow:(new Date()).getTime(), timeBefore:1488930695721,//為了便於示范這里是一個寫死的時間，且這個時間戳是毫秒級的
//如果服務器返回的是秒級，需要乘以1000
test:1488930695721 }, methods: { changeTest:function(e){ this.test = e.target.value; } }, watch: { test:function(){ console.log(arguments); } }, }); </script>
</html>
框起來的部分是被我魔改了一下，為了實現一個輸入時間戳執行時間轉換的小測試~