【Vue】入門編(フィルタ:filters)

こんにちは。
本日はVue.jsの入門編。
filtersについて記載します。

概要

フィルタは一般的なテキストフォーマットを設定する際に使用します。
使用する際は、Mustacheもしくはv-bindで使用します。
定義したフィルタはテンプレートに以下のように記載して使用します。 引数 | フィルタ名

サンプル

金額表示の調整と、IDの生成をフィルタを使用して設定します。

<div id="app">
  <div v-bind:id="number | adjustId"></div>
  <div>
    <span>金額表示：{{ 10000000 | adjustNumber }}</span>
  </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: { number: 10},

    // フィルタの定義
    filters: {
      // 数字を3桁ごとにカンマ区切りする
      adjustNumber: function(value) {
        if (!value) {
          return '0'
        }

        return value.toLocaleString()
      },

      // IDを調整する
      adjustId: function(value) {
        return 'vBind' + value;
      }
    }
  });
</script>

以上です。