filter过滤器的使用

在vue项目中我们经常需要对数据进行处理，比如需要将时间戳处理成时间节点，或者将时间节点处理成时间戳等等。

在项目中可以注册全局过滤器，也可以在组件中注册过滤器。

1、 注册全局过滤器

ps：注册全局过滤器，必须在new Vue实例之前注册。Vue.filter()

1 Vue.filter(名称，function(value){// 业务逻辑})

 1 // 转为大小字母
 2 Vue.filter('strToUpperCase', function (str) {
 3   if (!str) {
 4     return str;
 5   }
 6   return str.toString().toUpperCase();
 7 });
 8 // 转为小写字母
 9 Vue.filter('strToLowerCase', function (str) {
10   if (!str) {
11     return str;
12   }
13   return str.toString().toLowerCase();
14 });
15 // vue实例
16 new Vue({
17   render: h => h(App),
18   store,
19   router
20 }).$mount('#app');

 

 

 

 2、组件中注册过滤器

 1 
10 
41 

 

 过滤器中的第一个参数是 “|” 前的值，过滤器中不能获取 this，因为当我们需要传参的时候，可以在使用中去传参，也可以过滤器叠在一起使用。

 1 
10 
45 

 

 

 

 

 

总结：

1. 全局过滤器注册必须在new Vue实例之前，Vue.filter(名称，function（val）{// 业务逻辑})

2. 组件中注册过滤器使用，filters:{名称1：function（val）{}，名称2：function（val）{}}，注意：组件中注册的单词是“f-i-l-t-e-r-s”，全局注册没有s。

3. 过滤器中不能获得 this，但使用时可以传参，也可以叠加使用过滤器，如：

{{name|filter1(list)|filter2}}