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

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 + '円';
    }
  }
});

ブラウザの表示結果↓


無事2つのフィルターをかけることができました。



今回は以上です。
ご覧いただきありがとうございました(^^)

続きはこちら↓




参考書

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

コメント

コンタクトフォーム

    タイトルとURLをコピーしました