Vue中的filter过滤器是使用方法

在Vue中filter过滤器是一个非常强大的功能。
个人觉得称它为加工车间会更加贴切一些。
过滤器可以用来筛选出符合条件的，丢弃不符合条件的；
加工车间既可以筛选，又可以对筛选出来的进行加工。
一、filter的作用是：对值进行筛选加工。
二、使用的地方有两个位置，和两个方式。

{{ msg | filterA }}双括号插值内。

<h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind绑定的值的地方。
（msg为需要filter处理的值，filterA为过滤器。）
方式

{{ msg | filterA }}单个使用。

{{ msg | filterA| filterB }}多个连用。

三、过滤器的制作方法：

new Vue({
    filters:{
    //过滤器一：（使用时没有参数，即{{msg|filterA}}）
          filterA(value){
            return “￥”+value
          }
        }
    })
    //添加filters属性，该属性内的函数就是过滤器。其中value就是{{msg|filterA}}中的msg。

new Vue({
    filters:{
    //过滤器二：（使用时有参数，即{{ msg | filterA( arg1, arg2, arg3.... )}}）
               filterA (value , ...args){//其中msg为filterA中的第一个参数value。
                for(arg in args{
                  console.log(arg)
                  value+=arg
                }
                return value
              }
        }，
           filterB (value , ...args){
                for(arg in args{
                  console.log(arg)
                  value+=arg
                }
                return value
              }
        }
    })
    （使用时有参数，即{{ msg | filterA( arg1, arg2, arg3.... ) | filterB( arg1, arg2, arg3.... )}}）
    此时msg为filterA的第一个参数，filterA执行完后的返回值为filterB的第一个参数，以后也是依次类推。

例如：

以开发需求为案例，需求是将后端返回的字段付款方式用文字显示：

 

 

1、由于filter中定义的过滤函数不能使用this，需要全局定义一个数组

 

 2、在vue实例中写filters：{}代码