Bagaimana untuk menggelungkan parameter padanan dalam vue

Dalam Vue, kami selalunya perlu melakukan operasi gelung dan memadankan parameter masuk. Artikel ini akan memperkenalkan anda cara menggelungkan parameter padanan dalam Vue.

Langkah 1: Tentukan komponen

Pertama, kita perlu mentakrifkan komponen Vue. Mengambil komponen senarai sebagai contoh, kodnya adalah seperti berikut:

<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>

Komponen ini menerima parameter tatasusunan bernama listData dan memberikannya kepada items untuk paparan. Dalam komponen, kita boleh menggunakan arahan Vue v-for untuk menggelungkan pemaparan data senarai dan :key digunakan untuk mengoptimumkan prestasi dan menghapuskan amaran.

Langkah 2: Masukkan parameter

Seterusnya, kita perlu menghantar parameter dalam tika Vue. Kodnya adalah seperti berikut:

<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>

Dalam contoh Vue, kami memperkenalkan komponen import melalui List dan lulus tatasusunan data sebagai parameter kepada atribut List bagi listData komponen.

Langkah 3: Gelung padanan parameter

Kini, kami telah berjaya menghantar parameter kepada komponen dan memberikan senarai data. Jika kita perlu menggelung untuk memadankan parameter yang dihantar, kita boleh melakukannya dalam kitaran hayat created. Kodnya adalah seperti berikut:

<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>

Dalam templat contoh Vue, apabila kami menggunakan komponen List, kami menambah item carian search dan lulus Banana sebagai parameter.

Seterusnya, dalam List kitaran hayat komponen created, kami akan menggunakan kaedah filter untuk menggelung dan memadankan parameter masuk. Kod khusus adalah seperti berikut:

<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>

Dalam kod ini, kami menggunakan kaedah tatasusunan JavaScript filter Dengan menghantar fungsi, kami boleh menapis item tatasusunan yang memenuhi syarat. Di sini, kami menentukan sama ada atribut name item tatasusunan mengandungi parameter yang diluluskan dalam search dan jika ia memenuhi syarat, tambahkannya pada tatasusunan items. Akhirnya, kami hanya akan memaparkan item senarai yang memenuhi kriteria.

Setakat ini, kami telah berjaya melaksanakan fungsi parameter padanan gelung dalam Vue. Dalam pembangunan sebenar, kami juga boleh menggunakan kaedah yang sama untuk membangunkan komponen mengikut keperluan, meningkatkan kecekapan pembangunan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menggelungkan parameter padanan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!