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

フロントエンド開発テクノロジの継続的なアップグレードに伴い、開発作業にはますます新しいテクノロジが導入されていますが、Vue.js と TypeScript が最も人気のある 2 つのテクノロジであることは間違いありません。この記事では、Vue.js で TypeScript フィルターを使用する方法を紹介します。

1. フィルターの原理

Vue.js で提供されるフィルター フィルターは、Angular のパイプ フィルターと同様に、データをフォーマットするために使用されます。その実装原理は、JavaScript 言語の組み込み関数 Array.prototype.filter() に基づいています。この関数は関数をパラメータとして受け取り、新しい配列を返します。新しい配列の要素は、元の配列のすべての要素です。指定された条件を満たすもの。

Vue.js では、フィルターのパラメータとして関数を定義することで、データを整形することができます。この関数は、整形が必要なデータを受け取ります。

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

Vue.js でフィルターを使用するには 2 つの方法があります。1 つはグローバル フィルター、もう 1 つはローカル フィルターです。

2.1 グローバル フィルター

グローバル フィルターは、Vue.component() や Vue.directive() と同様、Vue コンストラクターで定義され、グローバル スコープで使用できます。グローバル フィルターを定義するコードは次のとおりです。

Vue.filter('filterName', function(value) {
  // 这里实现过滤器的具体逻辑
})

この時点で、すべての Vue インスタンスで filterName フィルターを使用できます。

2.2 ローカル フィルター

ローカル フィルターは Vue コンポーネントで定義され、コンポーネント内でのみ使用できます。ローカル フィルターを定義するコードは次のとおりです。

export default {
  // ...
  filters: {
    filterName(value) {
      // 这里实现过滤器的具体逻辑
    }
  }
}

Vue コンポーネントで複数のフィルターが必要な場合は、次のように定義できます。

export default {
  // ...
  filters: {
    filter1(value) {
      // ...
    },
    filter2(value) {
      // ...
    }
  }
}

3. Vue.js で使用されます。 TypeScript でフィルターを定義する

TypeScript を使用して Vue.js でフィルターを定義する方法は、パラメーターで型を宣言し、戻り値を返す必要がある点を除いて、JavaScript を使用してフィルターを定義する方法と基本的に同じです。開発中に使用できるように、TypeScript の型チェックとスマート プロンプトを今すぐお楽しみください。

以下は、TypeScript を使用して Vue.js でフィルターを定義する方法を示すサンプル コードです。

import Vue from 'vue';

interface IUser {
  name: string;
  age: number;
}

Vue.filter('userInfo', (value: IUser) => `${value.name}（${value.age}岁）`);

userInfo という名前のグローバル フィルターを定義します。これは、IUser パラメーターのタイプと、文字列型を返します。

4. フィルターの使用

Vue.js のテンプレートでフィルターを使用する方法は非常に簡単で、「|」記号を使用してフィルターを呼び出すだけです。データはバインドされています。

たとえば、数値を通貨形式に変換したい場合は、次のように記述できます。

<p>{{ price | currency }}</p>

price は書式設定する必要があるデータを表し、currency はグローバルまたは通貨を表します。定義したローカル フィルター名。

5. 概要

Vue.js アプリケーションでフィルターを使用すると、データをフォーマットしてより美しいビューを表示することが容易になります。 TypeScript と組み合わせると、開発プロセス中に型チェックとインテリジェントなプロンプトの利便性を享受できます。

もちろん、フィルタをより柔軟に使用してさまざまな開発ニーズに対応できるようにするには、まずフィルタの原理と使用法を理解することが前提です。

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