基本

Vue.js 中的自定義過濾器可以通過對 Vue.filter 的單個函式呼叫輕鬆建立。

//JS
Vue.filter('reverse', function(value) {
    return value.split('').reverse().join('');
});

//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'

最好將所有自定義過濾器儲存在單獨的檔案中，例如在 ./filters 下，因為在下一個應用程式中可以輕鬆地重複使用你的程式碼。如果你這樣做，你必須替換 JS 部分 ：

//JS
Vue.filter('reverse', require('./filters/reverse'));

你也可以定義自己的 begin 和 end 包裝。

//JS
Vue.filter('wrap', function(value, begin, end) {
    return begin + value + end;
});

//HTML
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox'