【Vue.js】filterを使ってHTML側で色々な処理を行いたい

Vue.js

　フィルタとは、文字数を丸めたり数字にカンマを入れるといったテキストベースの変換処理に特化した機能です。フィルタはローカルまたはグローバルに登録して使用しますが、注意点としてローカルに登録した場合でもthisへのアクセスはできません。

引用元：基礎から学ぶ Vue.js

filterは以下のようにHTML側で対象のdataにセットすることができます。

{{ 対象のデータ | filterの名前 }}
<!-- もしくは -->
<div v-bind:id="対象のデータ | filterの名前"></div>

filterで1000桁ごとにカンマをつけたい

filterで1000桁ごとにカンマをつけたいという場合には以下のようにfiliterを設定することができます。


See the Pen
filterで1000桁ごとにカンマをつける by りっしー (@hiwriterprogram)
on CodePen.

filtersで使用されているtoLocaleString()はJSのメソッド。こちらでJSのメソッドを使用して色々な処理をすることができるはずです。

グローバルfiliterを設定する

以下は、先ほどと結果が同じですがfilter自体はVue.filterとしてグローバルで登録しています。これで全てのnew Vueによって生成されたインスタンスでlocaleNumフィルターを使用することができます。


See the Pen
グローバルfilters by りっしー (@hiwriterprogram)
on CodePen.

filterは複数を繋げられる


See the Pen
GVjOPg by りっしー (@hiwriterprogram)
on CodePen.

上記の例のようにfilterは幾つでも繋げることができます。複雑なfilterにするなら役割を分けて設定する方が見通しが良くなるでしょう。

流れとしては、

  1. 1つ目のfilterが結果を出す
  2. 2つ目のfilterが1つ目のfilterの結果を引数にして結果を出す
  3. filterがある分だけ繰り返し…

ということになります。

他にも1つのfilterに複数の引数を持たせることも可能です。

参考

基礎から学ぶ Vue.js