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

Vue.js入門第10回。今回はフィルタについて解説してみます。

はじめに

今までもフィルタを使っていたサンプルはありましたが、詳細掘り下げてみます。

フィルタはデータバインディングの際に任意の処理を噛ませたい時に利用します。

例えば数値にカンマを付与したりトリムで空白を取り除いたり、長文テキストを丸めて末尾に「・・・」を付与して省略表示させたい時などに使います。

なお、フィルタにはローカルフィルタとグローバルフィルタの２つがあります。

ローカルフィルタ

まずは、ローカルフィルタを使って金額にカンマを付与してHTMLに出力するようにしてみます。

ソースコード

解説

Javascript

ローカルフィルタはfiltersプロパティに定義します。

ここではカンマを付与するnumberFormatというフィルタを作成し、引数のvalueにカンマを付与して返却しています。

HTML

マスタッシュ構文とv-bindディレクティブどちらも確認していますが、文法は同じです。

バインドしたいプロパティ（ここではprice）に続けて"|"（パイプ）とフィルタ名を指定することでフィルタが適用され、結果カンマ付きの金額が表示されています。

グローバルフィルタ

続いてグローバルフィルタです。

ローカルフィルタと同様にカンマを付ける＋フィルタは複数指定できるので、末尾に単位も付与してみたいと思います。

ソースコード

解説

Javascript

フィルタを定義する場所が違うだけです。ローカルフィルタはfiltersプロパティに定義したのに対し、グローバルフィルタはコンポーネント同様vueインスタンス生成前に定義します。

また、numberFormatに加え、単位を付与するaddUnitフィルタを定義しています。

HTML

こちらはローカルフィルタと全く同じです。

numberFormatのあとに更に"|"でaddUnitフィルタを適用しています。