Vue项目中过滤器(filters)的用法

Posted 2022-05-19 沛沛老爹

过滤器使用场景

在调取接口的返回数据的时候，我们经常能够得到各种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(参数)