フィルター

グローバルスコープにフィルター登録

Vue.filter()メソッドを使ってグローバルスコープに登録すると、全てのコンポーネントから共通で利用できるようになります。

フィルター適用

テキストバインド

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

グローバルフィルター登録

Vue.filter('number_format', function(val) {
  return val.toLocaleString();
});

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

ローカルスコープにフィルター登録

filtersオプションを使ってコンポーネントの中に登録したフィルターは、その中だけで使えるローカルスコープとなり、他のコンポーネントから隠れる。特定のコンポーネントの中だけで使うフィルターは、なるべくローカルスコープに登録したほうが独立性を保てます。

ローカルフィルター登録

var app = new Vue({
  el: '#app',
  data: {
    price: 4500
  },
  filters: {
    number_format: function(val) {
      return val.toLocaleString();
    }
  }
});

複数のフィルターを連結

2つ以上のフィルター名を「|」でつなぐと、 フィルターが連鎖的に適用されます

フィルターの組み合わせ

複数バインド

<div id="app2">
  {{price | unit}} {{price | number_format | unit}}
</div>

複数フィルター

var app2 = new Vue({
  el: '#app2',
  data: {
    price: 12500
  },
  filters: {
    number_format: function(val) {
      return val.toLocaleString();
    },
    unit: function(val) {
      return val + '円';
    }
  }
});