Vue では、多くの場合、ループ操作を実行し、受信パラメーターを照合する必要があります。この記事では、Vue でパラメーターのマッチングをループする方法を紹介します。

ステップ 1: コンポーネントを定義する

まず、Vue コンポーネントを定義する必要があります。ここでは例として list コンポーネントを取り上げます。コードは次のとおりです:

このコンポーネントは listData という名前の配列パラメータを受け取り、それを表示のために items に割り当てます。 。コンポーネントでは、Vue のディレクティブ v-for を使用してリスト データのレンダリングをループし、:key を使用してパフォーマンスを最適化し、警告を排除できます。

ステップ 2: パラメータを渡す

次に、Vue インスタンスのパラメータを渡す必要があります。コードは次のとおりです。

Vue インスタンスでは、import を通じて List コンポーネントを導入し、data 配列をパラメータを List コンポーネントの listData プロパティに設定します。

ステップ 3: ループ マッチング パラメーター

これで、パラメーターがコンポーネントに正常に渡され、データ リストがレンダリングされました。受信パラメータと一致するようにループする必要がある場合は、created ライフ サイクルで実行できます。コードは次のとおりです。

Vue インスタンスのテンプレートで、List コンポーネントを使用するときに、検索項目 search を追加し、## を渡します。 #Banana をパラメータとして指定します。

List コンポーネントの created ライフ サイクルで、filter メソッドを使用してループし、受信パラメーターを照合します。具体的なコードは次のとおりです:

filter メソッドを使用し、関数を渡すことで、条件を満たす配列項目をフィルターで除外できます。ここでは、配列 item の name 属性に受信 search パラメータが含まれているかどうかを判断し、条件を満たしている場合は、items 配列に追加します。最終的には、基準を満たすリスト項目のみが表示されます。

以上がvueで一致するパラメータをループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。