Vue.jsにおけるフィルタ機能。
特定の文字を変換したりする際に有効な機能です。
ということで今回は、Vue.jsにおけるフィルタについて解説していきます！
フィルタとは
「フィルタ」とは、文字数を丸めたり数字にカンマを入れるといったテキストベースの変換処理に特化した機能です。
フィルタの使い方
登録したフィルタは、Mustacheまたはv-bindディレクティブの値にパイプ「|」でフィルタ名をつなげることで呼び出します。
ローカルへの登録
コンポーネントのfiltersオプションに登録することで、特定のコンポーネント内でのみ使用できます。
グローバルへの登録
汎用的なフィルタはグローバルメソッドVue.filterを使って登録することで、すべてのコンポーネントから使用できます。
フィルタに引数を持たせる
次のように、2つ目以降の引数を持たせることもできます。
この例では、第1引数としてmessageプロパティの値、第2引数としてfooプロパティの値、第3引数として100が受け取れます。
複数のフィルタをつなげて使用する
複数のフィルタをパイプでつなげ、メソッドチェーンのように扱うこともできます。
まとめ
今回はVue.jsにおけるフィルタについて解説しました。
フィルタはうまく使うことで、文字列変換などの処理を綺麗にまとめることができるのでドンドン使っていきましょう！
ではまた！
おすすめ本
僕がVue.jsの勉強をする際に購入した本になります。
この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ！
