javascript - How to customize a time filter Vue.filter in vue

Question

How to customize a filter in vue to convert the timestamp to less than 24 hours, display today greater than 24 hours, display yesterday greater than 48 hours, display year-month-day
Simple imitation of 白云草狗's article But it doesn’t play a big role

Filtered results 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>

Answer 1

It would be better to use custom instructions.

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__;
    }
}