美文网首页
Vue自定义管道,时间过滤器

Vue自定义管道,时间过滤器

作者: 前端码农专心造轮子 | 来源:发表于2020-12-28 17:39 被阅读0次

    1、在src文件夹中创建一个新的文件,用来放置自定义的管道:pipe-vue.js

    import Vue from 'vue';
    
    Vue.filter('dateTime', function (date, type) {
        if (date != null && date != "") {
            let yer,
                month,
                day,
                HH,
                mm,
                ss;
            let time = new Date(date),
                timeDate;
            yer = time.getFullYear();
            month = time.getMonth() + 1;
            day = time.getDate();
            HH = time.getHours(); //获取系统时,
            mm = time.getMinutes(); //分
            ss = time.getSeconds(); //秒
    
            month = (month < 10) ? ('0' + month) : month;
            day = (day < 10) ? ('0' + day) : day;
            HH = (HH < 10) ? ('0' + HH) : HH;
            mm = (mm < 10) ? ('0' + mm) : mm;
            ss = (ss < 10) ? ('0' + ss) : ss;
    
            switch (type) {
                case 'yyyy':
                    timeDate = String(yer);
                    break;
                case 'yyyy-MM':
                    timeDate = yer + '-' + month;
                    break;
                case 'yyyy-MM-dd':
                    timeDate = yer + '-' + month + '-' + day;
                    break;
                case 'yyyy/MM/dd':
                    timeDate = yer + '/' + month + '/' + day;
                    break;
                case 'yyyy-MM-dd HH:mm:ss':
                    timeDate = yer + '-' + month + '-' + day + ' ' + HH + ':' + mm + ':' + ss;
                    break;
                case 'HH:mm:ss':
                    timeDate = HH + ':' + mm + ':' + ss;
                    break;
                case 'MM':
                    timeDate = String(month);
                    break;
                default:
                    timeDate = yer + '-' + month + '-' + day;
                    break;
            }
            return timeDate
        } else {
            return ''
        }
    })
    

    2、在main.js文件中引入,方便全局使用

    import Vue from 'vue';
    import App from './App.vue';
    import './pipe-vue.js'; // 管道方法
    
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    });
    

    3、使用方法

    <span>{{ data.dateupload_time | dateTime('yyyy-MM-dd') }}</span>
    

    相关文章

      网友评论

          本文标题:Vue自定义管道,时间过滤器

          本文链接:https://www.haomeiwen.com/subject/zfstoktx.html