問題描述

vue怎么自定義個過濾器 將時間戳轉(zhuǎn)換為小于24小時顯示今天 大于24小時顯示昨天 大于48小時顯示年-月-日簡單的模仿了 白云蒼狗的文章 但是不是起很大的作用

過濾后的結(jié)果 2013-03-22 02:20

<p id='app'> <input type='text' v-model='a'/><hr /><span> {{daitem |times}}</span> </p>

<script type='text/javascript'>

Vue.filter(’times’,function (item) {var date = (typeof item === ’number’) ? new Date(item) : new Date((item || ’’).replace(/-/g, ’/’))// console.log(date)var diff = (((new Date()).getTime() - date.getTime()) / 1000)var dayDiff = Math.floor(diff / 86400)var isValidDate = Object.prototype.toString.call(date) === ’[object Date]’ && !isNaN(date.getTime())if (!isValidDate) { console.error(’not a valid date’) return item} var today = new Date(date) var year = today.getFullYear() var month = (’0’ + (today.getMonth() + 1)).slice(-2) var day = (’0’ + today.getDate()).slice(-2) var hour = (’0’ + today.getHours()).slice(-2) var minute = (’0’+today.getMinutes()).slice(-2)if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) { return `${year}-${month}-${day} ${hour}:${minute}`} return dayDiff === 0 && (diff < 86400 && ’今天’) ||dayDiff < 2 && ’昨天’ + `${hour}:${minute}`||dayDiff < 3 && ’前天’ + `${hour}:${minute}`||dayDiff >3 && `${year}-${month}-${day}` });var vm = new Vue({ el: ’#app’, data: {daitem: ’2013-3-22 2:20’ }, }); </script>

問題解答

應(yīng)該用自定義指令更好。

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(); }, // 獲取今年1月1日0點0分0秒的時間戳 getYearUnix: function () {var date = new Date();date.setMonth(0);date.setDate(1);date.setHours(0);date.setMinutes(0);date.setSeconds(0);date.setMilliseconds(0);return date.getTime(); }, // 獲取標準年月日 getLastDate: function(time) {var date = new Date(time);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; }, // 轉(zhuǎn)換時間 getFormatTime: function(timestamp) {var now = this.getUnix(); //當前時間戳var today = this.getTodayUnix(); //今天0點時間戳var year = this.getYearUnix(); //今年0點時間戳var timer = (now - timestamp) / 1000; // 轉(zhuǎn)換為秒級時間戳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/3600) + ’小時前’;} else if (timer/86400 <= 31) { tip = Math.ceil(timer/86400) + ’天前’;} else { tip = this.getLastDate(timestamp);}return tip; }};export default { bind: function (el, binding) {el.innerHTML = Time.getFormatTime(binding.value * 1000);el.__timeout__ = setInterval(function() { el.innerHTML = Time.getFormatTime(binding.value * 1000);}, 60000); }, unbind: function (el) {clearInterval(el.__timeout__);delete el.__timeout__; }}