javascript - vue怎么自定义个时间过滤器Vue.filter

问题描述

vue怎么自定义个过滤器 将时间戳转换为小于24小时显示今天 大于24小时显示昨天 大于48小时显示年-月-日简单的模仿了 白云苍狗的文章 但是不是起很大的作用

过滤后的结果 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>

问题解答

应该用自定义指令更好。

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; }, // 转换时间 getFormatTime: function(timestamp) {var now = this.getUnix(); //当前时间戳var today = this.getTodayUnix(); //今天0点时间戳var year = this.getYearUnix(); //今年0点时间戳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/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__; }}