[Vue.js]フィルターの使い方

2021-02-28

Vue.jsのフィルターについて解説していきます。

[Vue.js]フィルターとは？

フィルターの説明をする前にマスタッシュについて触れておきます。

マスタッシュでは要素の中身を動的に変更できます。

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

new Vue({
    el: '#app',
    data: {
      price: 1000
    }
  })

ちなみに、マスタッシュの中身で計算式や単一式を使うことができます。

例えば金額に税金を掛けたり、1,000のように区切りを付けたりできるわけですね。

ちなみに、単一式以外は利用できません。(例：var hoge = 1000)

要は右辺で完結する式なら単一式、演算子などが利用できます。

話が逸れましたが、上記コードで将来的に税率が15%になったらどうでしょうか。

{{ price * 1.1 }}の箇所を全て書き換える必要がありますね。

作業が必要になりますし、こういったケースはままあります。

では、マスタッシュの値を変更するものを別でまとめて用意できれば？

それが本記事のテーマでもあるフィルターになります。

フィルターの基本形

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

new Vue({
    el: '#app',
    data() {
        return {
            price: 1000
               }
           },
    filters: {
        tax(price) {
            return price * 1.1
                         }
             }
})

js側でfiltersを記載し、フィルター名を決めて処理を記述します。

html側ではマスタッシュの中に | フィルター名の形で記述。

ちなみに | はパイプと呼びます。

フィルターの連結も可能

上記ではマスタッシュの中に一つのフィルターを記述しましたが、フィルターの連結も可能です。

priceに税金を掛けて、3桁で区切る(1,000)コードを書いてみます。

<div id=”app”>
{{ price | tax | numFormat }}
</div>

フィルターの連結は、|で区切るだけでOK。

new Vue({
  el: '#app',
  data() {
  return {
  price: 1000
 }
},
  filters: {
  tax(price) {
  return price * 1.1
  },
  numFormat(price) {
  return price.toLocaleString()
  },
 }
})

numFormatで3桁で区切る処理を記載しています。数値.toLocaleString()の部分がそうです。