簡單介紹一下過濾器，顧名思義，過濾就是一個數據經過了這個過濾之后出來另一樣東西，可以是從中取得你想要的，或者給那個數據添加點什么裝飾，那么過濾器則是過濾的工具。例如，從['abc','abd','ade']數組中取得包含‘ab’的值，那么可通過過濾器篩選出來‘abc’和‘abd’；把‘Hello’變成‘Hello World’，那么可用過濾器給值‘Hello’后面添加上‘ World’；或者把時間節點改為時間戳等等都可以使用過濾器。
全局過濾器：
Vue.filter('globalFilter', function (value) {
return value + "!!!"
})
<body> <div class="box"> <!-- | 代表管道，過濾器語法 后面msopt是過濾器的名字 --> <p>{{ ms | msopt('瘋狂')}}</p> </div> <script> // 標准函數 // var a=function (args){ // alert("hello word"); // }; // 箭頭函數 // var a=()=>{ // alert("hello word"); // }; // 全局過濾 filter 第一個參數是必須的，第一個參數就是{{ms |msopt}}"|"前面的 // 定義一個全局的過濾器 filter名字叫做msopt //這里面回調函數 function(){return dd.replace()} 簡寫成了箭頭函數 // 而且 <p>{{ ms | msopt('瘋狂'')}}</p> 我們需要自己來出傳遞這個參數 // 我們知道filter 里面的回調函數 第一個參數是寫死的，我們只能用第二個 Vue.filter('msopt', (dd,arg)=>{ return dd.replace('/單純/g',arg); // /單純/g 正則表達式 g 是全局搜索 }) var vm=new Vue({ el:'.box', data:{ ms:'單純的我，就喜歡單純的問問,你單純嗎？' }, methods: { }, }) </script>
私有過濾器（filters）
<tbody> <tr> <td>{{ jj | appmeg("不上班") }}</td> </tr> </tbody> </table> <script> var vm=new Vue({ el:'.table', data:{ jj:'今天星期六' }, methods:{ }, //定義自定義(私有)的過濾器 // filters:{ // // appmeg 私有過濾器的名字 a 是必須參數 代表要過濾的字符串 // 如果存在私有和全局過濾器，采用就近原則先用私有的過濾器 // appmeg:function(a){ // return a+'sdfsdfsdf'; // } // } // 帶有參數的自定義filter filters:{ // appmeg 私有過濾器的名字 a 是必須參數 代表要過濾的字符串 appmeg:function(a,b){ return a+'sdfsdfsdf'+b; } } }); </script>