フィルタの連結

フィルタは1つだけでなく、複数連結させて使うことができます。

 

構文

{{ オブジェクト | フィルタ1 | フィルタ2 }}

 

 

1つめのフィルタで日本円→USドルへ変換、2つ目のフィルタでカンマ区切りにするフィルタを定義し、連結させて表示させてみます。

 

index.html

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

 

index.js

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

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

var app = new Vue({
    el: '#app',
    data: {
        jpyPrice: 298000
    }
})

 

ブラウザ

gyazo.com