Bagaimana untuk menggelungkan parameter padanan dalam vue

PHPz
Lepaskan: 2023-04-13 10:39:29
asal
1021 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan