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：{}代碼