作用：格式化數據，比如將字符串格式化為首字母大寫、將日期格式化為指定的格式等。
- 過濾器可以定義成全局過濾器和局部過濾器。
- 過濾器的本質就是一個方法，使用過濾器實際上就相當於方法調用，僅是書寫形式上的差異（使用的時候需要用“|”，其也可以被稱之為管道或變量/數據修飾符）
a. 過濾器的作用：處理數據，加工數據
b. vue3.x中已經刪除，但是不排除現在企業中還有老的項目依然使用2
c. 過濾器分為全局與局部（是否帶s）
d. 過濾器處理程序必須有返回值（必須有return）
e. 過濾器的處理必須至少有1個形參，形參就是需要處理的數據
f. 過濾器在使用的時候需要使用特殊符號“|”
在視圖中的語法：
1) {{time|filtername}}
“|”左右空格與否無所謂
time會默認被作為參數傳遞給過濾器filtername
2) {{time|filtername(arg1,arg2....)}}
過濾器后可以接着傳遞參數，后面的第一個參數就是過濾器處理程序的第2個形參....以此類推
g. 由於在vue3中已經刪除過濾器，但是去思想依然在，官方推薦使用計算屬性/函數調用的方式來處理數據
h. 過濾器支持連續調用，例如： {{string | A過濾器 | B過濾器 | C過濾器...}}
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <meta charset='UTF-8'> 5 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 6 <title>標題</title> 7 </head> 8 <body> 9 <div class='app'> 10 <p> 原始數據{{date}}</p> 11 <p> 局部過濾波器轉換數據1{{date|parse}}</p> 12 <p> 全局過濾器轉換數據2{{date|all}}</p> 13 <p> 計算屬性轉換數據2{{cal}}</p> 14 </div> 15 </body> 16 <script src='./js/vue.js'></script> 17 <script> 18 // 全局過濾器 19 // 聲明過濾器，過濾器的名稱，函數，函數至少具有一個形參 20 Vue.filter('all',function(date){ 21 return date.toUpperCase(); 22 }) 23 new Vue({ 24 el: '.app', 25 data: { 26 date: 'iokjiujnhyogMIKJGBYHU7IOBGUYfjmwerklsafgjv', 27 }, 28 // 定義過濾器，局部的 29 filters:{ 30 // 過濾器的名稱，函數。函數至少具有一個形參，第一個形參代表元素 31 parse:function(date){ 32 // 需要將結果后返回出去才可以 33 return date.toLowerCase(); 34 } 35 }, 36 // 使用計算屬性 37 computed:{ 38 // 計算屬性的名稱 39 cal:function(){ 40 // 最后將結果進行返回 41 return this.date.toLowerCase() 42 } 43 } 44 }) 45 </script> 46 </html>