[TOC] # 過濾器 ***** >[warning]在vue中，將過濾器寫在filter中，里面可以有多個過濾方法，在頁面結構中，使用 | 進行過濾，上一個過濾器的輸出，作為下一個過濾器的輸入 <br> ### **局部過濾** ``` <div id="app"> <!-- 過濾器使用 | 進行過濾，上一個過濾器結果作為下一個過濾器的輸入--> <p>{{item | formatDate | addStr}}</p> </div> <script> new Vue({ el: '#app', data: { item: '2020/02/14' }, filters: {//過濾 formatDate(val) { // 2020/02/14 -->2020-02-14 // 數組拼接的方式 // split('/') 將字符串以/轉換為數組 .join('-') 將數組用-轉換為字符串 return val.split('/').join('-'); }, addStr(val){ return '當前時間：' + val; } } }) </script> ``` ### **全局過濾** ``` <div id="app"> <!-- 過濾器使用 | 進行過濾，上一個過濾器結果作為下一個過濾器的輸入--> <p>{{item1 | formatDate | addStr}}</p> </div> <div id="app1"> <p>{{item1 | formatDate | addStr}}</p> </div> <script> // 全局過濾器要寫在vue實例前 Vue.filter('formatDate',function(val){ return val.replace(/\//g,'-'); }) Vue.filter('addStr',function(val){ return "當前時間：" + val; }) new Vue({ el: '#app', data: { item1: '2020/02/14' }, }) new Vue({ el: '#app1', data: { item1: '2020/05/20' }, }) </script> ```