Vue.jsのfilterメソッドの使い方

Vue.jsのfilterメソッドの使い方

filterメソッドを使うと、メソッド名通りにfilterしてデータを加工してくれます。

登録方法は2通りあります。

1つ目は、Vue.filterで登録します。

第一引数 第二引数
フィルター名 関数

フィルター名を使用して、関数が実行される仕組みとなっております。

以下、formatというフィルター名で関数を登録しています。

Vue.filterメソッドの場合は、new Vue()~より先に定義しないといけないです。

フィルターを定義したら次は実際に使ってみます。

使い方は、mustache(マスタッシュ)内に|(パイプ)で繋げます。

みたいな感じです。これはageを加工します。加工するのはfilterの第二引数の関数になります。

ブラウザで見るとこんな感じです!データがfilter機能で加工されています!

Vue.jsのfilterメソッドの使い方

Vue.jsのfilterメソッドの使い方

2つ目の方法として、ローカルスコープでfilterを登録する方法があります。filtersプロパティを使用します。

このプロパティで指定したフィルターはその要素内でのみしか使えませんが、コンポーネント思考ではこちらがお勧めです。

全体のhtmlは以下です。

ブラウザは以下のように表示されます。

Vue.jsのfilterメソッドの使い方

Vue.jsのfilterメソッドの使い方

次回はcomputedという算出プロパティについて勉強してみます!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA