過濾器vue.filters的使用

• 2019 年 10 月 5 日
• 筆記

寫項目的時候，有一些方法我們是需要全局使用的，比如數字的四色五入保留小數點啊、一些工具方法、字符的格式化啊等等。這些很多頁面需要用的、使用頻率極高的方法，我們一般會將其封裝為全局的方法；我以前是這樣做的，有這麼幾種方式：

1、掛載到vue.prototype

• 在main.js入口文件中掛載到vue.prototype，如我們封裝一個獲取時間戳的函數。

Vue.prototype.now = Date.now || function () {      return new Date().getTime();  };  

• 然後就可以在.vue頁面中使用了

<script>      export default {          mounted(){              console.log('now:' + this.now());          },      }  </script>  

2、全局混入mixins

• 同樣也還是在main.js中。
• mixins的全局注入規則大家應該都懂，如果組件中沒有這個getTime方法，那麼就會在頁面中注入這個方法。

Vue.mixin({    data() {},    methods: {      getTime() {        return new Date().getTime();      }    }  });  new App({    el: '#app'    // ...  });

3、關於vue.filters

（1）問題

• 前面兩種方法弊端有很多，比如一般將全局變量掛載到prototype總是不太好的，狀態管理我們用vuex；第二個全局混入的話，子組件中也會混入這些方法等等；最大的弊端就是代碼的可讀性和維護問題，如果項目體積大了，復用的方法多了，總不能都掛到prototye上去對吧？
• 這個時候，vue.filters過濾器就能夠較好的解決這個問題。

（2）使用

• 先看一波官網–>傳送門
• ok，看完了，基本了解了過濾器的概念和基本使用方式以後，我們具體到項目中的使用。
• 新建一個filters文件夾，丟一行代碼（很常用的一行代碼，就是對數字做一些四捨五入的處理）

數字四捨五入保留兩位小數點

• main.js中引入

// global filters  import Vue from 'vue';  import * as filters from '@/filters';    Object.keys(filters).forEach((key) => {    Vue.filter(key, filters[key]);  });

• 然後頁面中就可以使用了

<div>{{num | formatAmountFixed2}}</div>    <script>  data(){      return {          num: 11111      }  }  </script>