フィルタ

概要

Vue.js のフィルタは、本質的には「値を取り、加工し、加工した値を返す」関数です。マークアップ内ではパイプ(|)で表され 、一つ以上の引数を続けることができます。

1
<element directive="expression | filterId [args...]"></element>

フィルタは、 ディレクティブの値の最後に位置しなければなりません。

1
<span v-text="message | capitalize"></span>

mustache スタイルのバインディング内でも利用することができます。

1
<span>{{message | uppercase}}</span>

複数のフィルタはお互いに連結できます。

1
<span>{{message | lowercase | reverse}}</span>

引数

いくつかのフィルタはオプションの引数を取ることができます。引数はスペースで区切られています。

1
<span>{{order | pluralize 'st' 'nd' 'rd' 'th'}}</span>
1
<input v-on="keyup: submitForm | key 'enter'">

プレーンな文字列引数は、引用符 (‘’) で囲む必要があります。引用符ではない引数は、現在のデータスコープに対して動的に評価されます。詳しくは、カスタムフィルタの詳細について話すときに説明します。

上記の例の明確な利用方法は、API リファレンスを参照してください。

これで、ディレクティブとフィルタについて知ることができました。では、実際にリスト表示をやってみましょう。