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

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

  <p>{{arr|sortArray}}</p>

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

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

3. 使用过滤器时出现死循环
   
   因为在将原数组排序后赋值给原数组，引用空间没有变化，过滤一直在执行
   解决办法：

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

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

4. 有参过滤

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

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

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

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;
    }

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

<p v-for="(item,index) in forsort" :key="index">{{item}}</p>

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

<p v-for="(item,index) in forsort()" :key="index">{{item}}</p>

全局过滤器

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

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

看代码:

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

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

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

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

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

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

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

4. 在组件中使用

<p>{{arr|arrSort}}</p>

页面显示：

[ 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

三、结论 当引用文件时: import //模块.函数，导入模块，每次使用模块中的函数都要是定是哪个模块。

 from…import //直接使用函数名使用就可以了
 from…import* // 是把一个模块中所有函数都导入进来;

注：相当于：相当于导入的是一个文件夹中所有文件，所有函数都是绝对路径。