自定义过滤器和全局过滤器

Love The Way You Lie 2023-05-30 06:17 32阅读 0赞

1.  过滤器中必须有返回值
2.  一般使用花括号`{ {}}`插值，管道符前是要过滤的元素，管道符之后是过滤方法

{ { arr|sortArray}}

> 过滤方法中有一个参数，这个参数就是传进来的要过滤的元素

// 过滤器
      filters:{ 
        sortArray(a){ 
          console.log(a);//(6) [1, 2, 3, 4, 5, 6, __ob__: Observer]
        }
      }

1.  使用过滤器时出现死循环  
    ![在这里插入图片描述][20191110233120291.png]  
    因为在将原数组排序后赋值给原数组，引用空间没有变化，过滤一直在执行  
    **解决办法：**

> 使用扩展符将数组赋值给新的变量，并且引用空间发生了改变，不会再循环

// 过滤器
      filters:{ 
        sortArray(value){ 
          let [...array]=[...value];  //引用空间发生变化 
          array.sort((a,b)=>b-a);
          return array;
      }
      }

1.  有参过滤

> 根据文本框的内容筛选符合条件的内容显示

<input type="text" v-model="txtval">
 { { testarray | slect(txtval)}}

slect(value,txt){ 
        let array=[];
        for(let key of value){ 
          if(key===txt){ //满足条件的元素显示
            array.push(key)
          }
        }
        return array;
      }
      }

![在这里插入图片描述][20191111001839885.png]

5.`v-for`里不能直接写管道符`|`过滤，可以将过滤条件添加在方法或者计算属性中  
方法

forsort() { 
          let array = [...this.arr];
          console.log(array); //(6) [1, 2, 3, 4, 5, 6]
          array.sort((a, b) => b - a);
          return array;
        }

> 写在计算属性中调用时不加执行（）

{ { item}}

> 写在方法中时加（）执行方法

{ { item}}

##### 全局过滤器 #####

> 以上定义的过滤器均为局部过滤器，只能在当前组件使用

1.  在`src`目录下新建一个`filters`文件夹,在`filter`目录下创建一个`filter.js`文件  
    这里举一个数组排序从大到小的例子

看代码:

> 过程中因为名称问题报错，更改后成功

let arrSort = function(value) { 
        let array=[...value];
        array.sort((a,b)=>b-a);
        return array;
        }
    }
    export {  arrSort }

1.  在入口文件（main.js）中引入这个`filter`文件 (路径以你自己的为准)

import * as filter from './filters/filter'

1.  在入口文件中全局注册filter

> 这个暂时没有查到讲解！！

//过滤器统一处理加载
    Object.keys(filters).forEach(key => {   
      Vue.filter(key, filters[key])  
    })

1.  在组件中使用

{ { arr|arrSort}}

页面显示：

[ 6, 5, 4, 3, 2, 1 ]

知识点补充;

> 一、`import…as`  
> `import`：导入一个模块；注：相当于导入的是一个文件夹，是个相对路径
> 
> `import A as B`：给予工具库 A 一个简单的别称 B ，可以帮助记忆。

> 二、`from…import from…import`：导入了一个模块中的一个函数；注：相当于导入的是一个文件夹中的文件，是个绝对路径。
> 
> 例：如 `from A import b,`相当于  
> `1 import A`
> 
> `2 b = A.b`