フィルタ(グローバルフィルタ)

グローバルフィルタ構文

Vueインスタンスを定義する前に、以下のようにVue.filterにフィルタを定義することで、全てのコンポーネントからフィルタを使用できるようになります。

Vue.filter(filterName, function(value){

  //処理

})

 

new Vue({

  //省略

})

 全てのコンポーネントで使用するような汎用的なフィルタは、グローバルフィルタとして定義しておきます。

 

 

index.html

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

 

index.js

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

var app = new Vue({
    el: '#app',
    data: {
        price: 20000000
    }
})

 

ブラウザ

gyazo.com