Vue.js: Filter 過濾器
23 May 2017
Vue.js 提供 Filter（過濾器）處理格式化文字等狀況，若非資料處理，只是呈現上的簡易調整，就很適合使用 Filter。
如何使用 Filter 過濾器？
Mustache 模版插植
如下例，將價格 price 加上千分位符號與 $ 字號。可使用「|」（pipe）聯集多個 Filter，要注意順序，愈靠左愈先執行。
Demo
程式碼
<div id="app">
<div>${ price | commaFormat | priceFormat }</div>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
price: 9999999,
},
Filters: {
priceFormat: function(value) {
// 加上 $ 字號
return '$' + value;
},
commaFormat: function(value) {
// 加上千分位符號
return value
.toString()
.replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function(all, pre, groupOf3Digital) {
return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
});
},
},
});
// 由於部落格會把使用雙花括號的內容吃掉，所以設定 delimiters 以顯示完整程式碼。
備註：這裡的 Filter 是局部註冊。
注意 Filter 的設定順序。如下所示，若先執行 priceFormat 再執行 commaFormat，就會轉失敗。
Demo
程式碼
<div id="app">
<div>${ price | priceFormat | commaFormat }</div>
</div>
v-bind屬性綁定
將 Filter 用於屬性上。
Demo
程式碼
<div id="app">
<div :data-price="price | commaFormat | priceFormat"></div>
</div>
傳入參數
Filter 是函數，可傳入參數。第一個參數是表達式（這裡是 msg），之後才是 Filter 代入的參數（「Peter」對應「arg1」，「Hello World!」對應「arg2」）。
Demo
程式碼
<div id="app">
<div>${ msg | prompt('Peter', 'Hello World!') }</div>
</div>
Vue.Filter('prompt', function(value, arg1, arg2) {
return value + ' ' + arg1 + ', ' + arg2;
});
備註：這裡的 Filter 是全域註冊。
比較 Filter 和 Computed
Filter 適於文字格式處理等簡單的狀況，而較複雜的資料處理則適合使用 Computed。
