vueで一致するパラメータをループする方法

PHPz

リリース： 2023-04-13 10:39:29

オリジナル

1046 人が閲覧しました

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

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

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

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "List",
  props: {
    listData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      items: [],
    };
  },
  created() {
    this.items = this.listData;
  },
};
</script>

ログイン後にコピー

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

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

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

<template>
  <div>
    <List :listData="data" />
  </div>
</template>

<script>
import List from "@/components/List";

export default {
  name: "App",
  components: {
    List,
  },
  data() {
    return {
      data: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" },
      ],
    };
  },
};
</script>

ログイン後にコピー

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

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

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

<template>
  <div>
    <List :listData="data" search="Banana" />
  </div>
</template>

<script>
import List from "@/components/List";

export default {
  name: "App",
  components: {
    List,
  },
  data() {
    return {
      data: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" },
      ],
    };
  },
};
</script>

ログイン後にコピー

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

次に、

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

<script>
export default {
  name: "List",
  props: {
    listData: {
      type: Array,
      required: true,
    },
    search: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      items: [],
    };
  },
  created() {
    this.items = this.listData.filter((item) =>
      item.name.includes(this.search)
    );
  },
};
</script>

ログイン後にコピー

このコードでは、JavaScript の配列

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

これまでのところ、Vue でパラメータを一致させるループの機能を実装することに成功しました。実際の開発においても、同様の手法を用いてニーズに応じたコンポーネントを開発し、開発効率の向上とユーザーエクスペリエンスの向上を図ることができます。

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