月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! 今は農作業中のため東京にいるよ! ギランバレー症候群に関する情報を集めています

【Vue.js】フィルタの使い方!テキストの変換処理に!

             
  • 2018.08.19
  • IT
【Vue.js】フィルタの使い方!テキストの変換処理に!
Advertisement

 

Vue.jsにおけるフィルタ機能

特定の文字を変換したりする際に有効な機能です。

ということで今回は、Vue.jsにおけるフィルタについて解説していきます!

 

 

フィルタとは

「フィルタ」とは、文字数を丸めたり数字にカンマを入れるといったテキストベースの変換処理に特化した機能です。

 

 

フィルタの使い方

登録したフィルタは、Mustacheまたはv-bindディレクティブの値にパイプ「|」でフィルタ名をつなげることで呼び出します。

 

 

ローカルへの登録

コンポーネントのfiltersオプションに登録することで、特定のコンポーネント内でのみ使用できます。

 

ローカルへの登録

 

 

グローバルへの登録

汎用的なフィルタはグローバルメソッドVue.filterを使って登録することで、すべてのコンポーネントから使用できます。

 

 

Advertisement

 

フィルタに引数を持たせる

次のように、2つ目以降の引数を持たせることもできます。


この例では、第1引数としてmessageプロパティの値、第2引数としてfooプロパティの値、第3引数として100が受け取れます。

 

 

複数のフィルタをつなげて使用する

複数のフィルタをパイプでつなげ、メソッドチェーンのように扱うこともできます。


 

 

まとめ

今回はVue.jsにおけるフィルタについて解説しました。

フィルタはうまく使うことで、文字列変換などの処理を綺麗にまとめることができるのでドンドン使っていきましょう!

ではまた!

 

 

おすすめ本

僕がVue.jsの勉強をする際に購入した本になります。

この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ!

 

Travelerを知らないの?