Vue.jsをはじめてみます④ 〜filters

Vue.jsをはじめて勉強中です。

前回はVue定義のオプションでel/dataについて触った感じです。

今回はサンプルコードと説明をもとにまた進めていきます。

購入した書籍はこちら。

filterというオプション

これはdataオブジェクトに対して処理したい場合に記述します。

例えばdataに対して、金額表示を３桁のカンマで区切りたい時などです。

jsfiddle.netで実行しました。

（パイプで繋げて利用するところがsmartyを使っていたときの自前関数見たいな使い方だなと感じました。古くてすみません。。）

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">

  <p>表示金額: {{ price | numberWithDelimiter }}円</p>

</div>

var vm = new Vue({

  el: '#app',

  data: {

    price: 1000000

  },

  filters: {

    numberWithDelimiter: function (value) {

      if (!value) {

        return '0'

      }

      return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')

    }

  }

})

window.vm = vm

dataのpriceに対して処理をする場合にパイプ(|)で繋げてフィルター名を書いてあげると、関数のパイプの左側を引数として処理するということみたいです。

正規表現の部分は数字３回の繰り返しで、マッチした数字３回分とカンマで繋げていって文字列を返すというもの。

ちなみにfiltersは連結して複数適用できる。

value | filterA | filterB

データに対しての処理を今回は学びました。