【Vue.js 入門】フィルターの使い方

フィルターとは、マスタッシュ構文 {{ … }} でバインドしたデータに何らかの加工を加える機能のことです。

Vue.js の書き方を最初から知りたいという方はこちら(^^)

参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ！！

Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです！Vue.jsのツボとコツがゼッタイにわかる本...

方法①：グローバルスコープにフィルターを登録
方法②：ローカルスコープに登録
複数のフィルターをかける

方法①：グローバルスコープにフィルターを登録

グローバルフィルターに登録することで、すべてのコンポーネントから利用できるようになります。

Vue.filter ( フィルター名 ,　関数オブジェクト );

注意点

必ず new Vue よりも前に登録するようにしてください。

登録したフィルターを使うときは、マスタッシュ構文の中に以下のように書きます。

サンプルとして、税込金額を返すフィルターを作ります。

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

Vue.filter('taxedPrice', function(val) {
  return val * 1.1;
});
//　↑　フィルターを必ず先に登録

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

price プロパティの値は5000ですが、フィルターをかけたことによって税込金額（10%として計算）の5500が出力されます。

ブラウザの表示結果↓

方法②：ローカルスコープに登録

filters オプションに登録することでローカルスコープになります。

他のコンポーネントからは参照できなくなるため、コンポーネントの独立性を保てるというメリットがあります。

先ほどのサンプルと同じものをローカルスコープで書くと次のようになります。

var app = new Vue({
  el: '#app',
  data: {
    price: 5000
  },
  filters: {
    taxedPrice: function(val) {
      return val * 1.1;
    }
  }
});

HTMLに変更はありません。同様に5500と出力されます。

複数のフィルターをかける

このように書くだけです(^^)

税込金額に変換するフィルターと、金額に「円」をつけるフィルターを2つかけてみます。

<div id="app">
  {{price | taxedPrice | unit}}
</div>

var app = new Vue({
  el: '#app',
  data: {
    price: 5000
  },
  filters: {
    taxedPrice: function(val) {
      return val * 1.1;
    },
    unit: function(val) {
      return val + '円';
    }
  }
});

ブラウザの表示結果↓