1. Vue のフィルターとは
フィルタ ( filter) は伝送媒体のパイプライン上で不可欠なデバイスです. 平易な言葉で言えば, 不要なものを取り除くことです. フィルタは元のデータを本質的に変更するのではなく, データを処理した後にフィルタリングされたデータを返します. 呼処理用、純粋な関数として理解することもできます。
Vue一部の一般的なテキスト形式に使用できるフィルターをカスタマイズできます
ps:Vue3廃止されましたfilter
2. Vue でフィルターを使用する方法
vueのフィルターは 2 つの場所で使用できます: 二重中括弧の補間と式です 。フィルターは、「パイプ」記号で示される式の最後 v-bind に追加する必要があります 。JavaScript
フィルターを定義する
コンポーネント オプションでローカル フィルタを定義する
グローバル フィルターを定義します。
注: グローバル フィルターとローカル フィルターの名前が同じ場合、ローカル フィルターが使用されます。
フィルター関数は常に式の値 (前の操作チェーンの結果) を最初のパラメーターとして受け取ります。上記の例では、capitalize フィルター関数は message 次の値を受け取ります。
フィルターを直列に接続可能
この例では、filterA フィルター関数は 1 つの引数を取るように定義されており、 message 式の値が引数として関数に渡されます。次に、フィルタ関数を呼び出します。この関数も単一の引数を取るように定義されており filterB、 filterA 結果を に渡します filterB 。
フィルターは JavaScript関数であるため、引数を受け取ることができます。
ここで、filterA は 3 つのパラメーターを受け取るフィルター関数として定義されます。
その中の 値message が第一引数、通常の文字列が 'arg1' 第二引数、 arg2 式の値が第三引数として使われます。
例えば：
まとめ：
- ローカル フィルターは、グローバル フィルターよりも優先して呼び出されます
- 1 つの式で複数のフィルターを使用できます。フィルターはパイプ文字「|」で区切る必要があります。実行順序は左から右へ
3. Vue でアプリケーション シナリオをフィルター処理する
通常の開発では、単位変換、デジタル管理、テキストの書式設定、時間の書式設定など、フィルターを使用する必要がある場所がたくさんあります。
たとえば、30000 => 30,000 を達成したい場合は、フィルターを使用する必要があります。
