javascript - Bagaimana untuk menyesuaikan penapis masa Vue.filter dalam vue

Question

Cara menyesuaikan penapis dalam Vue untuk menukar cap waktu kepada kurang daripada 24 jam, paparan hari ini lebih daripada 24 jam, paparan semalam lebih daripada 48 jam, paparan tahun-bulan-hari
Tiruan ringkas Artikel Baiyuncaou Tetapi ia tidak t membuat perubahan besar Fungsi

Keputusan ditapis 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

Adalah lebih baik untuk menggunakan arahan tersuai.

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