フィルターとは？
{...}で出力されるデータがテキスト出力させる前に何らかの加工を加えることができる機能です。
用途例
主にフォーマッター用途で使われることが実務では多いです。
- 金額を3桁でカンマ区切りにしたり
- 計算結果を四捨五入する
- Dateオブジェクトを「yyyy/mm/dd」という形式に変換する。
- パーセント表示にする。
computedとの使い分けは？
可読性重視ならfilter
computedの場合は引数を取る事ができないのでフィルタと同じことをしようとするとプロパティごとに別の関数を用意する必要が出てきてしまいます。フィルタは複数のプロパティがあったとしても一つの関数で対応する事が可能です。
速度重視ならcomputed
ただし、filterはmethodと同じように関係ないプロパティが再読み込みされた際も実行されてしまいます。もし、何度も読み込みを行うプロパティや読み込みが重くなるようなプロパティの場合はcomputed(Reactで言うところのuseMemo)を使用するようにしましょう。
thisは使えない
filter内ではthisを使って同一インスタンス内のデータ等にはアクセスする事はできません。もしthisが使いたい場合はcomputedやmethodsを使うようにしましょう。
構文
グローバルスコープへ登録
Vue.filterを使う
下記のように記述することでグローバルスコープに登録されて、全コンポーネントから共通で利用できるようになります。
|
1 |
Vue.filter(フィルタ名,関数オブジェクト); |
Vue.filterはnew Vue()によりVueインスタンスを生成する前に実行しておく必要があります。
テキストにバインドしたデータにフィルタを適用する
下記のように記述することも可能です。
|
1 |
{{ プロパティ名 | フィルタ名 }} |
複数フィルタをつなげる
|
1 |
{{ プロパティ名 | フィルタ名1 | フィルタ名2 }} |
ローカルスコープへ登録
filtersオプションを使います。引数名はなんでも良いですが、valueと言う変数を使うのが一般的です。
|
1 2 3 4 5 |
filters: { 関数名(value){ return valueに対する加工処理; } } |
フィルタを利用できる場所
フィルタが利用できる場所は下記の場所のみになります。
- Mushtache展開（{{}}）
- v-bindのディレクティブ内
この記事へのコメントはありません。