Lær, hvordan du bruger Vues v-for-direktiv til at gengive lister.
En af de mest almindelige opgaver inden for webudvikling er gengivelse af datalister. Vue håndterer dette ved hjælp af v-for direktiv. Du vil undersøge, hvad v-for-direktivet er, hvordan man fjerner elementer fra en liste, og hvordan man gengiver lister med nøgler.
Hvad er v-for-direktivet i Vue?
Det v-for direktiv er et af Vues direktiver, der giver dig mulighed for at gengive lister med minimal JavaScript-kode. Det v-for direktiv fungerer på samme måde som for loop i JavaScript og kan iterere over arrays og objekter for at gengive elementer på en liste.
At udnytte v-for direktiv, skal du angive et array, du vil gentage i data ejendom af Options-objekt i Vue.
For eksempel:
<skabelon>
<ul>
<liv-for="navn i navne">{{ navn }}li>
ul>
skabelon>
<manuskript>
eksport standard {
data() {
Vend tilbage {
navne: ['John', 'Doe', 'James'],
};
},
};
manuskript>
Kodeblokken ovenfor viser et eksempel på en Vue-app, der bruger v-for direktiv om at iterere over navne array, der findes i data ejendom.
v-for har en værdi sat til et udtryk med to dele: iterationsvariablen (navn) og navne array v-for peger på. Iterationsvariablen holder hver navn i navne array og viser navn.
Vue skaber en ny Document Object Model (DOM) element for hver navn i navne array og gengiver det på websiden.
Hvis navne array-ændringer (f.eks. tilføjes et nyt navn, eller et gammelt fjernes), vil Vue automatisk opdatere den virtuelle DOM og gengive listen for at afspejle de opdaterede data.
Vue tilbyder også en måde at få indekset for et element på en liste.
<liv-for="(navn, indeks) i navne">{{ navn }} -- {{ indeks }}li>Koden ovenfor viser syntaksen for visning af indekset for hver navn i navne array.
Du kan også bruge v-for direktiv om at gå gennem en række tal:
<liv-for="antal i 10">Vue er dejligtli>
Ovenstående kode vil gengive en liste med teksten Vue er dejligt ti gange. Det v-for direktiv kan også gå gennem en række tal for gentagne gange at vise data eller udføre en handling. I dette tilfælde num iterationsvariabel bruges til at få adgang til det aktuelle element på listen.
Sådan fjerner du elementer fra en liste i Vue
Du kan tillade brugere at fjerne elementer fra lister i din webapp. Denne funktion er nyttig, når du bygger apps som en huskeliste.
Du kan bruge splejsning JavaScript-metoden (det er en af måderne at fjernelse af elementer fra arrays) for at fjerne et element fra en liste i Vue.
array.splice (startIndex, numToRemove, newElements)
Splejsningsmetoden kan tilføje eller fjerne elementer fra et array. Splejsningsmetoden tager parametrene ind i følgende rækkefølge:
- Det startindeks parameter indstiller indekset, hvorpå arrayet skal ændres.
- numToRemove angiver antallet af elementer, du vil fjerne fra arrayet.
- Endelig nye elementer parameter, som du kan bruge til at tilføje elementer til arrayet. Hvis der ikke er angivet nogen elementer, splejs () vil kun fjerne elementer fra arrayet.
For at bruge splejsningsmetoden til at fjerne et element fra en liste i Vue, skal du kende indekset for det element. En måde at opnå dette på er at bestå indeks som argument for en metode, der håndterer fjernelse af varen.
For eksempel kan du tilføje en knap ud for hvert navn i arrayet, der udløser en metode til at fjerne elementet, når en bruger klikker på det:
<skabelon>
<ul>
<liv-for="(navn, indeks) i navne">
{{ navn }} -- {{ indeks }}
<knap @klik="removeItem (indeks)">Fjerneknap>
li>
ul>
skabelon>
Det indeks parameter giver os adgang til indekset for hver navn i arrayet, som dette program sender som et argument til fjerne vare metode. Det fjerne vare metode kan derefter bruge splejsning metode til at fjerne en navn fra navne array:
<manuskript>
eksport standard {
data() {
Vend tilbage {
navne: ['John', 'Doe', 'James'],
};
},
metoder: {
removeItem (indeks) {
this.names.splice (indeks, 1);
}
}
};
manuskript>
Ovenstående script bruger splejsning metode til at fjerne ét navn fra listen over gengivet navne. Dette vil automatisk opdatere listen i brugergrænsefladen, så den afspejler det opdaterede array.
Sådan gengiver du lister med nøgler i Vue
Det nøgle attribut er en unik attribut, som Vue bruger til at spore identiteten af hvert element på listen. Når et punkt på listen ændres, ved hjælp af nøgle attribut Vue kan hurtigt opdatere DOM uden at gengive hele listen.
Lad os se på et eksempel på gengivelse af en liste med nøgler i Vue:
<skabelon>
<div>
<ul>
<liv-for="navn i navne":nøgle="navn.id">
{{ navn.navn }}
<knap @klik="removeItem (name.id)">Fjerneknap>
li>
ul>
div>
skabelon>
<manuskript>
eksport standard {
data() {
Vend tilbage {
navne: [
{ id: 1, navn: "John"},
{ id: 2, navn: "Doe"},
{ id: 3, navn: "James"},
],
};
},
metoder: {
removeItem (nøgle) {
this.names.splice (nøgle - 1, 1);
},
},
};
manuskript>
I dette eksempel har du en liste over elementer med unikke id ejendomme. Kodeblokken bruger nøgle attribut med v-for direktiv for at spore identiteten af hvert element på listen. Dette giver Vue mulighed for effektivt at opdatere DOM, når listen ændres.
Hvis du skulle fjerne et element fra listen, ville Vue opdatere DOM uden at skulle gengive hele listen. Dette skyldes, at Vue har identiteten af hvert element på listen og kun kan opdatere de elementer, der er ændret.
Det nøgle attribut skal være en unik identifikator for hvert element på listen. Dette kan være en id ejendom eller enhver anden unik identifikator, der kan bruges til at spore varen.
Bruger nøgle attribut med v-for direktiv hjælper med at undgå gengivelsesproblemer. For eksempel, når du fjerner navnene, bruger Vue nøgle attribut for at opretholde rækkefølgen af elementerne på listen.
Vue-direktiver er essentielle
Her dækkede du det grundlæggende i gengivelse af lister i Vue, herunder fjernelse af elementer fra lister og gengivelse af lister med nøgler. Du kan bygge responsive grænseflader, der håndterer komplekse datalister ved at forstå disse begreber.
Vue har et væld af direktiver til forskellige formål, herunder betinget gengivelse, hændelsesbinding og databinding. At forstå disse direktiver kan hjælpe dig med at lave effektive interaktive webapps.
