Vueのfilterの使い方

Vueのフィルターはインスタンスで宣言するローカルフィルターと、
グローバルで設定し使用できるグローバルフィルターがある。

ローカルフィルター

ローカルで使用したい場合

<div id="app">
    <p>
        {{text | reverseText}}
    </p>
</div>

const app = new Vue({
    el:"#app",
    data:{
        text:'表示されるテキスト！'
    },
    filters:{
        reverseText:function(text){
            return text.split("").reverse().join("");
        }
    }
});

グローバルフィルター

<div id="app">
    <p>
        {{text | reverseText}}
    </p>
</div>

Vue.filter('reverseText',function(text){
            return text.split("").reverse().join("");
});

const app = new Vue({
    el:"#app",
    data:{
        text:'表示されるテキスト！'
    }
});

引数が２つ以上ある場合

<div id="app">
    <p>
        {{text | readMore(5,"***")}}
    </p>
</div>

Vue.filter('readMore', (text,length,suffix) =>{
    return text.substring(0, length) + suffix;
})

const app = new Vue({
    el:"#app",
    data:{
        text:"むかし、むかし、ある所におじいさんとおばあさんが住んでいました。おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると大きな桃が流れてきました。「なんと大きな桃じゃろう！家に持って帰ろう。」"
    }
});

１回でフィルターを複数使う場合

"|"で区切る
下記は円をドルにして３桁区切りでカンマを入れるプログラム

<div id="app">
    <p>
        {{yen | toUSD | numberFormat}}
    </p>
</div>

Vue.filter('toUSD',function(yen){
            return yen / 100;
});

Vue.filter('numberFormat',function(num){
            return num.toLocaleString();
});

const app = new Vue({
    el:"#app",
    data:{
        yen:200000
    }
});