Vue之自定义过滤器

自定义全局过滤器--日期格式化插件

1.filters.js

exports.formatDate = (value,format) => {
    let date = new Date(value);
    let yy = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let dd = date.getDate();
    dd = dd < 10 ? "0" + dd : dd;
    let formatYear = format.substr(2,1);
    let formatMonth = format.substr(5,1);
    let formatDate = format.substr(8,1);
    return `${yy}${formatYear}${MM}${formatMonth}${dd}${formatDate}`;
};

2.main.js全局引入

//引入过滤器
import filters from './lib/js/filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

3.在页面中使用

{{currentDate | formatDate('yy-mm-dd')}}

4.语法小记

• 多个方法可直接增加exports.xxx方法，也可将所有函数封装，在一次性export
• value为过滤的值
• 当前封装日期过滤器可过滤日期，如2019-12-15 转换成年月日可带参数('yy年mm月dd日')

    当前对象为 el