フィルタ(ローカルフィルタ)

フィルタとは

フィルタとは、フォーマットを整えるなどテキストの変換処理に特化した機能です。

Vue.jsでは、式の終わりに任意のフィルタを追加することができます。

 

 

ローカルフィルタ構文

基本的には以下のような構文になります。

 

htmlファイル側

 {{ 式 | filterName }}

 jsファイル側

new Vue = ({

  //省略

  filters: {

    filterName: function(value) {

      //処理

    }

  }

}) 

 

 

index.html

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

 

index.js

var app = new Vue({

    el: '#app',
    data: {
        price: 20000000
    },
    filters: {
        numberFormat: function(value) {
            return value.toLocaleString()
        }
    }
})

 

 

ブラウザ

gyazo.com