Dalam Vue, kami selalunya perlu melakukan operasi gelung dan memadankan parameter masuk. Artikel ini akan memperkenalkan anda cara menggelungkan parameter padanan dalam Vue.
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.
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.
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!