一、本節說明

在使用插值表示式的時候，我們通常會有一種需求，就是將資料進行二次的格式化。VUE的過濾器的實現參考了linux的shell命令的管道的實現原理：即上一個命令的輸出，是下一個命令的輸入。
所以過濾器可以串接使用：{{資料 | 過濾器A | 過濾器B}}

除了在插值表示式中可以使用過濾器，在後文中將要學習到的v-bind指令中也可以使用過濾器。用法是一致的，到時候我們再看一看。

二、 怎麼做

全域性過濾器（定義一個用於做日期格式化的過濾器）

• 過濾器的第一個引數是固定的，就是輸入的資料。對於{{message|date-format('yyyy-mm-dd')}}而言，引數input=message，即“|”管道符之前的資料輸出，作為過濾器的輸入資料。
• 過濾器除了第一個引數固定是“管道輸出”，其他的引數根據需要自定義。在傳參的時候，從第二個引數開始傳入即可。{{message|date-format(message,'yyyy-mm-dd')}}寫法是錯誤的。
• 其中let是ES6中定義變數的語法，類似於var，但在塊作用域方面有不同之處。可以自行搜尋深入學習
• 在上文程式碼中使用了 template string語法，使用該語法可以有效的解決，字串與變數繁瑣的拼接問題。“`”這個字元是鍵盤在英文輸入法環境中，ESC下方的那個按鍵。
• 在template string語法中，變數用${變數名}括起來。這個用法也是參考了linux的shell指令碼的實現。
• 使用ES6中的字串新方法String.prototype.padStart(maxLength,fillString='') 或 String.prototype.padEnd(maxLength,fillString='')來填充字串；padStart(2,'0')表示如果字串長度不足2位，則左補0，補足到長度為2.
  

三、 效果

過濾器的使用方法:

{{message}}
{{message|date-format('yyyy-mm-dd')}}

瀏覽器顯示的效果:

四、 深入：私有過濾器

除了可以定義全域性的過濾器，我們還可以定義私有過濾器。但是過濾器這種程式碼，類似於工具類，我們一般定義為全域性的，讓它在各個模組、元件裡面都可以使用。

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

以上就是vue通過過濾器實現資料格式化的詳細內容，更多關於vue實現資料格式化的資料請關注我們其它相關文章！