自定义过滤器filters

1,109 阅读1分钟

1.过滤器

实现数据的筛选、过滤、格式化

2.用法

以 “|”隔开  
<p>{{表达式 | 过滤器}}</p>

3.全局过滤器

在vue中utils(工具)文件件中新建一个filters.js
vue.filter:{
        //////dateFormat 为过滤器名称 
        dateFormat:function(oldDate){
            var newDate = "";
            var year = oldDate.getFullYear();
            var month = oldDate.getMonth()+1;
            var day = oldDate.getDay();
            newDate = year + "-" + month + "-" + day;
            return newDate;
        }
    }
1.使用的话在需要的组件中引入即可
2.用法:<div>{{tiem |dateFormat}</div>  dateFormat 为过滤器名称
3.全局过滤器filter 不需要加s

4.组件过滤器

1.在methods 这个方法后面定义
// 当前日期过滤器
// new Date() --> ××年××月××日
filters('fmtCurrentDate', (date) => {
    return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
});
用法:<div>{{tiem |fmtCurrentDate}</div>  fmtCurrentDate 为过滤器名称
    组件过滤器filter需要加s
这些就是过滤器的简单用法。需要一些特定的功能时,可创建自己需要的过滤器