过滤器使用场景

在调取接口的返回数据的时候，我们经常能够得到各种Number类型的数据。

这种格式的数据，很多时候都是表明对应的类型。

如果直接返回到页面上展示，对于操作人员来讲，没有任何意义。

所以，一般的情况下，我们需要把格式对应类型的中文名称显示出来。

这个时候一般的操作情况是使用类似的转换方法，将值传递过去，然后进行转换显示。

在VUE中，我们可以使用Vue的filter钩子函数来实现。

实现方式

代码格式

{{}}中实现filters顺序：

 
{{参数 | filters函数 | filters函数 | ...}}

| 后面可以有多个filters函数，前面filters函数return的结果是后面filters函数的参数。
并且可以在过滤函数后面加上()里面加上其他的参数

示例

假设我们现在有个类型type，对应的数组值为 1：开发环境；2：测试环境；3：UAT环境；4：线上环境。

定义对应是数组列表

dataArray:[
{
'label':'开发环境',
'value': 1    
},
{
'label':'测试环境',
'value': 2 
},
{
'label':'UAT环境',
'value': 3    
},
{
'label':'线上环境',
'value': 4 
}
]

创建过滤函数

filter:{
    getEvnNameFilter(val){
        let arrayData={
            1: '开发环境'，
            2: '测试环境',
            3: 'UAT环境',
            4: '线上环境'
        }
        return arrayData[val]
    }
}

在vue中使用{{}}和filter

在hmtl中直接这样使用

{{scope.row.type| getEvnNameFilter}}

你会发现，显示的数据直接变成名称了。

总结    

vue.js过滤器是在数据显示之前进行处理和筛选。

1.使用位置 ：{{  }}插值语法

2.语法 ：{{ data | filter1(参数) | fliter2(参数) }}