在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：{}程式碼