自定義過濾器 · vue

--- title: 自定義過濾器 type: guide order: 15 --- ## 基礎類似于自定義指令，可以用全局方法 `Vue.filter()` 注冊一個自定義過濾器，它接收兩個參數：**過濾器 ID** 和**過濾器函數**。過濾器函數以值為參數，返回轉換后的值： ``` js Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) ``` ``` html  <span v-text="message | reverse"></span> ``` 過濾器函數可以接收任意數量的參數： ``` js Vue.filter('wrap', function (value, begin, end) { return begin + value + end }) ``` ``` html  <span v-text="message | wrap 'before' 'after'"></span> ``` ## 雙向過濾器目前我們使用過濾器都是在把來自模型的值顯視在視圖之前轉換它。不過也可以定義一個過濾器，在把來自視圖（`<input>` 元素）的值寫回模型之前轉化它： ``` js Vue.filter('currencyDisplay', { // model -> view // 在更新 `<input>` 元素之前格式化值 read: function(val) { return '$'+val.toFixed(2) }, // view -> model // 在寫回數據之前格式化值 write: function(val, oldVal) { var number = +val.replace(/[^\d.]/g, '') return isNaN(number) ? 0 : parseFloat(number.toFixed(2)) } }) ``` 示例： {% raw %} <div id="two-way-filter-demo" class="demo"> <input type="text" v-model="money | currencyDisplay"> <p>Model value: {{money}}</p> </div> <script> new Vue({ el: '#two-way-filter-demo', data: { money: 123.45 }, filters: { currencyDisplay: { read: function(val) { return '$'+val.toFixed(2) }, write: function(val, oldVal) { var number = +val.replace(/[^\d.]/g, '') return isNaN(number) ? 0 : parseFloat(number.toFixed(2)) } } } }) </script> {% endraw %} ## 動態參數如果過濾器參數沒有用引號包起來，則它會在當前 vm 作用域內動態計算。另外，過濾器函數的 `this` 始終指向調用它的 vm。例如： ``` html <input v-model="userInput"> <span>{{msg | concat userInput}}</span> ``` ``` js Vue.filter('concat', function (value, input) { // `input` === `this.userInput` return value + input }) ``` 上例比較簡單，也可以用表達式達到相同的結果，但是對于更復雜的邏輯——需要多于一個語句，這時需要將它放到計算屬性或自定義過濾器中。內置過濾器 `filterBy` 和 `orderBy`，根據所屬 Vue 實例的當前狀態，過濾/排序傳入的數組。