Ievads sarakstu renderēšanā Vue

Viens no visizplatītākajiem tīmekļa izstrādes uzdevumiem ir datu sarakstu renderēšana. Vue to apstrādā, izmantojot v-par direktīva. Jūs izpētīsit, kas ir direktīva v-for, kā noņemt vienumus no saraksta un kā renderēt sarakstus ar taustiņiem.

Kas ir V-for direktīva Vue?

The v-par direktīva ir viena no Vue direktīvām, kas ļauj renderēt sarakstus ar minimālu JavaScript kodu. The v-par direktīva darbojas līdzīgi kā for cilpa JavaScript un var atkārtot masīvus un objektus, lai renderētu vienumus sarakstā.

Lai izmantotu v-par direktīvu, norādiet masīvu, kuru vēlaties atkārtot datus īpašums Opciju objekts Vue.

Piemēram:

<veidne>
<ul>
<liv-par="vārds vārdos">{{ vārds }}li>
ul>
veidne>
<skripts>
eksportēt noklusējuma {
 dati() {
 return {
 vārdi: ['Jānis', 'Doe', 'Džeimss'],
 };
 },
};
skripts>

Iepriekš redzamajā koda blokā ir parādīts Vue lietotnes piemērs, kas izmanto v-par direktīvu, kas jāatkārto vārdus masīvs, kas ir nodrošināts datus īpašums.

v-par

ir vērtība, kas iestatīta uz izteiksmi ar divām daļām: iterācijas mainīgais (nosaukums) un vārdus masīvs v-par norāda uz. Iterācijas mainīgais attiecas uz katru nosaukums iekš vārdus masīvs un parāda nosaukums.

Vue izveido jaunu Dokumenta objekta modelis (DOM) elements katram nosaukums iekš vārdus masīvs un atveido to tīmekļa lapā.

Ja vārdus masīva izmaiņas (piemēram, tiek pievienots jauns nosaukums vai noņemts vecais nosaukums), Vue automātiski atjauninās virtuālo DOM un atkārtoti atveidos sarakstu, lai atspoguļotu atjauninātos datus.

Vue piedāvā arī veidu, kā iegūt saraksta elementa indeksu.

<liv-par="(vārds, rādītājs) nosaukumos">{{ name }} -- {{ indekss }}li>

Iepriekš minētais kods attēlo katra indeksa parādīšanas sintakse nosaukums iekš vārdus masīvs.

Varat arī izmantot v-par direktīvu cilpai cauri skaitļu diapazonam:

<liv-par="skaitlis 10">Vue ir jaukali>

Iepriekš minētais kods atveidos sarakstu ar tekstu Vue ir jauka desmit reizes. The v-par direktīva var arī veikt cilpu cauri skaitļu diapazonam, lai atkārtoti parādītu datus vai veiktu darbību. Šajā gadījumā, num iterācijas mainīgais tiek izmantots, lai piekļūtu pašreizējam saraksta vienumam.

Kā noņemt vienumus no Vue saraksta

Varat ļaut lietotājiem noņemt vienumus no jūsu tīmekļa lietotnes sarakstiem. Šī funkcija ir noderīga, veidojot programmas, piemēram, uzdevumu sarakstu.

Jūs varat izmantot salaidums JavaScript metode (tas ir viens no veidiem, kā vienumu noņemšana no masīviem), lai noņemtu vienumu no Vue saraksta.

array.splice (startIndex, numToRemove, newElements)

Savienošanas metode var pievienot vai noņemt vienumus no masīva. Savienojuma metode ņem parametrus šādā secībā:

1. The startIndex parametrs iestata indeksu, pēc kura sākt masīva modificēšanu.
2. numToRemove norāda vienumu skaitu, ko vēlaties noņemt no masīva.
3. Visbeidzot, jauniElementi parametrs, ko varat izmantot, lai masīvam pievienotu elementus. Ja nav norādīts neviens elements, savienojums () noņems tikai elementus no masīva.

Lai izmantotu savienojuma metodi, lai noņemtu vienumu no Vue saraksta, jums jāzina šī vienuma rādītājs. Viens veids, kā to panākt, ir nokārtot rādītājs kā arguments metodei, kas apstrādā vienuma noņemšanu.

Piemēram, blakus katram nosaukumam masīvā varat pievienot pogu, kas aktivizē vienuma noņemšanas metodi, kad lietotājs uz tā noklikšķina:

<veidne>
<ul>
<liv-par="(vārds, rādītājs) nosaukumos">
 {{ name }} -- {{ indekss }}
<pogu @klikšķis="removeItem (index)">Noņemtpogu>
li>
ul>
veidne>

The rādītājs parametrs ļauj mums piekļūt katra indeksam nosaukums masīvā, ko šī programma nodod kā argumentu noņemt vienumu metodi. The noņemt vienumu metodi pēc tam var izmantot salaidums metode, kā noņemt a nosaukums no vārdus masīvs:

<skripts>
eksportēt noklusējuma {
 dati() {
 return {
 vārdi: ['Jānis', 'Doe', 'Džeimss'],
 };
 },
 metodes: {
 removeItem (index) {
 this.names.splice (indekss, 1);
 }
}
};
skripts>

Iepriekš minētais skripts izmanto salaidums metode, lai noņemtu vienu vārdu no renderēto vārdu saraksta. Tādējādi lietotāja interfeisa saraksts tiks automātiski atjaunināts, lai atspoguļotu atjaunināto masīvu.

Kā renderēt sarakstus ar atslēgām Vue

The taustiņu atribūts ir unikāls atribūts, ko Vue izmanto, lai izsekotu katra saraksta vienuma identitāti. Kad sarakstā tiek mainīts vienums, ar palīdzību taustiņu atribūts Vue var ātri atjaunināt DOM, atkārtoti nerenderējot visu sarakstu.

Apskatīsim piemēru, kā Vue atveidot sarakstu ar atslēgām:

<veidne>
<div>
<ul>
<liv-par="vārds vārdos": atslēga="name.id">
 {{ name.name }}
<pogu @klikšķis="removeItem (name.id)">Noņemtpogu>
li>
ul>
div>
veidne>
<skripts>
eksportēt noklusējuma {
 dati() {
 return {
 vārdi: [
 { id: 1, vārds: "Jānis"},
 { id: 2, name: "Doe"},
 { id: 3, vārds: "Džeimss"},
 ],
 };
 },
 metodes: {
 removeItem (atslēga) {
 this.names.splice (atslēga - 1, 1);
 },
 },
};
skripts>

Šajā piemērā jums ir saraksts ar vienumiem ar unikālu id īpašības. Kodu bloks izmanto taustiņu atribūts ar v-par direktīvu, lai izsekotu katra saraksta vienuma identitāti. Tas ļauj Vue efektīvi atjaunināt DOM, kad saraksts mainās.

Ja jūs no saraksta izņemtu kādu vienumu, Vue atjauninātu DOM, neatkārtoti renderējot visu sarakstu. Tas ir tāpēc, ka Vue saglabā katra saraksta vienuma identitāti un var atjaunināt tikai tos vienumus, kas ir mainīti.

The taustiņu atribūtam ir jābūt unikālam identifikatoram katram saraksta vienumam. Tas var būt id īpašumu vai jebkuru citu unikālu identifikatoru, ko var izmantot preces izsekošanai.

Izmantojot taustiņu atribūts ar v-par direktīva palīdz izvairīties no renderēšanas problēmām. Piemēram, noņemot nosaukumus, Vue izmanto taustiņu atribūtu, lai saglabātu saraksta vienumu secību.

Vue direktīvas ir būtiskas

Šeit jūs apskatījāt Vue sarakstu renderēšanas pamatus, tostarp vienumu noņemšanu no sarakstiem un sarakstu renderēšanu ar taustiņiem. Izprotot šos jēdzienus, varat izveidot adaptīvas saskarnes, kas apstrādā sarežģītus datu sarakstus.

Vue ir daudz direktīvu dažādiem mērķiem, tostarp nosacījuma renderēšanai, notikumu saistošai un datu saistošai. Izpratne par šīm direktīvām var palīdzēt izveidot efektīvas interaktīvas tīmekļa lietotnes.