vue-filter · 前端工程化指南

## 前言對于常用的過濾器，你應該熟悉并掌握，清楚他們的用法。Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。 ## 過濾器的使用過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示： ~~~  {{ message | capitalize }}  <div v-bind:id="rawId | formatId"></div> ~~~ 備注：各個過濾器可以串行使用，前面過濾器的處理結果可以作為后面過濾器的入參。 ## vue內置的過濾器 ### 字母操作 * capitalize 首字母大寫 * uppercase 字母轉為大寫 * lowercase 字母轉為小寫 ### json的過濾器可以吧表達式的值轉換為json 的字符串，是json的stringify的精簡版，后面可以接受一個number類型的數字，處理轉換之后的字符串縮進的距離，默認為2.` | json 4` ### 限制 * limitBy number 限制開始的前面n個元素 * filterBy str in '' 可以在數組中搜索返回具有這個關鍵詞的元素，也也可以指定某一個或者幾個屬性中匹配；拓展使用：可以把需要搜索的關鍵字列到數組里，方便統一的管理。例如： ~~~ <li v-for="item in items | filterBy name in 'name'">{{item.name}}</li> data:{ name:[ {name:111}, {name:222} ]} ~~~ * orderBy 通過某個排序字段第一個參數為string||array||function 第二個參數為可選的，表示是升序還是降序，大于等于0升序，小于0 降序，默認升序 ### currency 將數字轉換為貨幣，第一個參數代表貨幣符號，默認的是美元，后面的代表保留小數，默認是兩位 ~~~ {{amount | currency ￥ 2}} {{1233541 | currency ￥ 3}} ￥1，233，541.000 ~~~ ### debounce 延遲一定時間執行，接受的參數為延遲的毫秒數，一般用在輸入框的監聽時間，用來減少頻繁的事件調用. `@keyup="onkeyup | debounce 500"` ## 自定義過濾器 ~~~ //頁面中直接使用 new Vue({ // 定義自己的過濾器入參為value 返回自己需要的值 filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) // vue spa項目中使用,定義之后所有的頁面可以共用 Vue.filter(filtername,function(value){ return value }) ~~~ ## 全局過濾器以及傳參 ~~~ Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) ~~~ 備注：傳參的部分需要自己實踐下，多個參數的傳遞會有什么問題需要判斷下。在過濾器的參數定義中，第一個參數為傳入的值，第二個開始為過濾器的參數。 ## 注意事項 * 餓了么的element 的組件中prop屬性注入的值不可直接使用過濾器，需要用template標簽模板拿到具體的數據做處理。如果你想對里面的數據進行處理，可以當前頁面定義一個format的對應的格式化的方法，或者定義vue全局的過濾器，在template中使用。 * 項目中建議根據自己的需要，是全局的過濾器還是就某個頁面或者組件使用；另外需要注意的是要避免過濾器沖突，避免覆蓋原有的或者其他人的過濾器。 ## 參考文檔 - [官方filter定義](https://cn.vuejs.org/v2/guide/filters.html)