Vueでフィルターを使用する方法

Vue.js フィルターを使用すると、カスタマイズされたテンプレートで表示するためにデータを変換または書式設定することができます。グローバル フィルターはアプリケーション全体で使用できますが、ローカル フィルターはコンポーネントまたはテンプレート内でのみ使用できます。フィルターは、パイプ記号 (|) の後にフィルター名と引数をコロン (:) で渡して使用することで適用でき、複数のフィルターを連結して複数の変換を適用できます。

Vue.js のフィルター

フィルターは、Vue.js データ固有の命令での変換または書式設定に使用されます。これらを式またはコンポーネントに適用して、テンプレート内でのデータの表示方法をカスタマイズできます。

使用法

フィルターを使用するには、フィルター名の前にパイプ記号 (|) を付け、その後に適用するデータを続ける必要があります:

<code>{{ data | filterName }}</code>

例:

<code>{{ message | uppercase }}</code>

上記のコードは、message 変数の値を大文字に変換します。

カスタム フィルターの作成

カスタム フィルターは 2 つの方法で作成できます:

グローバル フィルター:
グローバル フィルターアプリケーション全体で利用できます。これらは、Vue がインスタンス化されるときに登録されます。

<code>const app = new Vue({
  filters: {
    myFilter(value) { /* 过滤器逻辑 */ }
  }
});</code>

ローカル フィルター:
ローカル フィルターは、特定のコンポーネントまたはテンプレート内でのみ使用できます。これらは、このコンポーネントまたはテンプレートで定義されています:

<code><template>
  <div>{{ message | myFilter }}</div>
</template>

<script>
export default {
  methods: {
    myFilter(value) { /* 过滤器逻辑 */ }
  }
};
</script></code>

フィルター パラメーター

フィルターは、コロン (:) を介して渡されるパラメーターを受け取ることができます:

<code>{{ data | filterName: argument }}</code>

For例:

<code>{{ date | dateformat: 'YYYY-MM-DD' }}</code>

上記のコードは、date 変数の値を特定の日付形式に変換します。

連鎖フィルター

フィルターを連鎖させて、データに複数の変換を適用できます:

<code>{{ data | filter1 | filter2 | ... }}</code>

例:

<code>{{ message | uppercase | truncate(20) }}</code>

上記のコードは、message 変数の値を大文字に変換し、それを 20 文字にインターセプトします。

以上がVueでフィルターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。