一、什麼是過濾器？

過濾器是對即將顯示的資料做進一步的篩選處理，然後進行顯示，值得注意的是過濾器並沒有改變原來的資料，只是在原資料的基礎上產生新的資料。

二、如何使用過濾器

<!-- 在雙花括號中 -->
<div>{{資料屬性名稱 | 過濾器名稱}}</div>
<div>{{資料屬性名稱 | 過濾器名稱(引數值)}}</div>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="資料屬性名稱 | 過濾器名稱"></div>
<div v-bind:id="資料屬性名稱 | 過濾器名稱(引數值)"></div>

三、vue 過濾器分類

過濾器分為兩種，一種是區域性過濾器，一種全域性過濾器。所有的過濾器都是函式，並且引數為要過濾的資料。

區域性過濾器：只允許在當前元件中使用
全域性過濾器：所有元件都可以使用

1) 區域性過濾器

語法：

new Vue({       
 filters: {      
    '過濾器名稱': function (value1[,value2,...] ) { 
       // 邏輯程式碼     
      } 
         }    
　　})    

實列：

// 建立 Vue 例項，得到 ViewModel
            var vm = new
 
 Vue({
                el: '#app',
                data: {
                    msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'
                },
                methods: {},
                //定義私用區域性過濾器。只能在當前 vue 物件中使用
                filters: {
                    dataFormat(msg) {
                        
 
return msg+'xxxxx';
                    }
                }
            });

2) 全域性過濾器

語法：

Vue.filter('過濾器名稱', function (value1[,value2,...] ) {  

//邏輯程式碼

})

例項：

<div id="app">
            <p>{{ msg | msgFormat('瘋狂','--')}}</p>
        </div>

        <script>
            // 定義一個 Vue 全域性的過濾器，名字叫做  msgFormat
            Vue.filter('msgFormat', function(msg, arg, arg2) {
                // 字串的  replace 方法，第一個引數，除了可寫一個 字串之外，還可以定義一個正則
                return msg.replace(/單純/g, arg+arg2)
            })
      </script>

注意：

1， 當有區域性和全域性兩個名稱相同的過濾器時候，會以就近原則進行呼叫，即：區域性過濾器優先於全域性過濾器被呼叫！

2， 一個表示式可以使用多個過濾器。過濾器之間需要用管道符“|”隔開。其執行順序從左往右

3，過濾器並不是只可以使用一個，一個數據可以用多個過濾器，從左向右執行，注意的下一個過濾器接收的是上一個過濾器的處理結果，因此千萬要注意使用順序

以上內容為個人學習總結，歡迎批評指正~~