データに対して、それを画面表示に適合させるための変換ロジックを記述するモノ つまり、これはサーバサイドのテンプレートエンジンでよく言われる ViewHelper という類の関数を登録する場所ということだ。

Vue オブジェクト生成のコンストラクタで filters というキーでオブジェクトとして登録する

new Vue({
    filters: {
        hogehoge: function(v){
            return v + " " + v;
        }
    }
});

登録する関数は引数を1つ取るモノにする

hoge というデータに対して hogehoge というフィルタを適用する。

<div>{{ hoge | hogehoge }}</div>

複数のフィルタを混ぜることもできる

<div>{{ hoge | hogehoge | piyopiyo}}</div>

この場合は先に書いたほうが先に適用されるので

piyopiyo(hogehoge(hoge));

という挙動になる。