Vue.jsフィルター

フィルタは、Vue.jsで、テンプレートの補間で使用される値にフォーマットと変換を適用する方法です。

フィルタは、Vueコンポーネントによって提供される機能であり、テンプレートの動的データの任意の部分にフォーマットと変換を適用できます。

コンポーネントデータなどは変更されませんが、出力にのみ影響します。

名前を印刷するとします。

<template>
  <p>Hi {{ name }}!</p>
</template>

<script> export default { data() { return { name: ‘Flavio’ } } } </script>

それを確認したい場合はどうしますかnameは実際には値を含んでおり、そうでない場合は「there」を出力するため、テンプレートは「Hi there!」を出力しますか?

フィルタを入力してください:

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, filters: { fallback: function(name) { return name ? name : ‘there’ } } } </script>

フィルタを適用する構文に注意してください。| filterName。 Unixに精通している場合、それはUnixパイプ演算子であり、操作の出力を入力として次の操作に渡すために使用されます。

ザ・filtersコンポーネントのプロパティはオブジェクトです。単一のフィルターは、値を受け入れて別の値を返す関数です。

戻り値は、Vue.jsテンプレートに実際に出力された値です。

もちろん、フィルターはコンポーネントのデータとメソッドにアクセスできます。

フィルタの良い使用例は何ですか?

  • 文字列の変換、たとえば、大文字にするか小文字にする
  • 価格のフォーマット

上にフィルターの簡単な例があります。{{ name | fallback }}

パイプ構文を繰り返すことにより、フィルターを連鎖させることができます。

{{ name | fallback | capitalize }}

これは最初に適用されますfallbackフィルタ、次にcapitalizeフィルタ(定義していませんが、作成してみてください!)。

高度なフィルターは、通常の関数パラメーター構文を使用してパラメーターを受け入れることもできます。

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>

<script> export default { data() { return { name: ‘House’ } }, filters: { prepend: (name, prefix) => { return </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">prefix</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> } } } </script>

パラメータをフィルタに渡す場合、フィルタ関数に渡される最初のパラメータは常にテンプレート補間の項目です(nameこの場合)、その後に渡した明示的なパラメーターが続きます。

複数のパラメーターは、コンマを使用して区切ることで使用できます。

矢印関数を使用したことに注意してください。メソッドと計算されたプロパティでは、ほとんどの場合参照するため、矢印関数は一般的に避けています。thisコンポーネントデータにアクセスしますが、この場合、フィルターはこれにアクセスする必要はありませんが、パラメーターを介して必要なすべてのデータを受信し、より単純な矢印関数構文を安全に使用できます。

このパッケージテンプレートで直接使用するための既成のフィルターがたくさんあります。capitalizeuppercaselowercaseplaceholdertruncatecurrencypluralizeもっと。

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: