Lär dig hur du använder Vues v-for-direktiv för att rendera listor.
En av de vanligaste uppgifterna inom webbutveckling är att rendera datalistor. Vue hanterar detta med hjälp av v-för direktiv. Du kommer att utforska vad v-for-direktivet är, hur man tar bort objekt från en lista och hur man renderar listor med nycklar.
Vad är v-for-direktivet i Vue?
De v-för directive är ett av Vues direktiv som låter dig rendera listor med minimal JavaScript-kod. De v-för direktivet fungerar på samma sätt som för loop i JavaScript och kan iterera över arrayer och objekt för att rendera objekt i en lista.
Att använda v-för ange en array som du vill iterera över i data egendom av Options-objekt i Vue.
Till exempel:
<mall>
<ul>
<liv-för="namn i namn">{{ namn }}li>
ul>
mall>
<manus>
export standard {
data() {
lämna tillbaka {
names: ['John', 'Doe', 'James'],
};
},
};
manus>
Kodblocket ovan visar ett exempel på en Vue-app som använder v-för direktiv att iterera över namn array som tillhandahålls i data fast egendom.
v-för
har ett värde satt till ett uttryck med två delar: iterationsvariabeln (namn) och den namn array v-för pekar på. Iterationsvariabeln håller var och en namn i namn array och visar namn.Vue skapar en ny Document Object Model (DOM) element för varje namn i namn array och återger den på webbsidan.
Om namn arrayändringar (till exempel ett nytt namn läggs till eller ett gammalt tas bort), kommer Vue automatiskt att uppdatera den virtuella DOM och återskapa listan för att återspegla den uppdaterade informationen.
Vue erbjuder också ett sätt att få indexet för ett element i en lista.
<liv-för="(namn, index) i namn">{{ namn }} -- {{ index }}li>Koden ovan visar syntaxen för att visa indexet för var och en namn i namn array.
Du kan också använda v-för direktiv att gå igenom ett antal nummer:
<liv-för="num i 10">Vue är trevligtli>
Ovanstående kod kommer att återge en lista med texten Vue är trevligt tio gånger. De v-för direktiv kan också gå igenom ett antal nummer för att upprepade gånger visa data eller utföra en operation. I det här fallet num iterationsvariabel används för att komma åt det aktuella objektet i listan.
Hur man tar bort objekt från en lista i Vue
Du kan tillåta användare att ta bort objekt från listor i din webbapp. Den här funktionen är användbar när du bygger appar som en att göra-lista.
Du kan använda splitsa JavaScript-metoden (det är ett av sätten att ta bort objekt från arrayer) för att ta bort ett objekt från en lista i Vue.
array.splice (startIndex, numToRemove, newElements)
Splitsmetoden kan lägga till eller ta bort objekt från en array. Skarvmetoden tar in parametrarna i följande ordning:
- De startIndex parametern ställer in indexet för att börja modifiera arrayen.
- numToRemove anger antalet objekt du vill ta bort från arrayen.
- Slutligen, den nya element parameter, som du kan använda för att lägga till element i arrayen. Om inga element anges, splitsa() tar bara bort element från arrayen.
För att använda splitsmetoden för att ta bort ett objekt från en lista i Vue måste du känna till indexet för det objektet. Ett sätt att uppnå detta är att passera index som ett argument till en metod som hanterar borttagningen av föremålet.
Du kan till exempel lägga till en knapp bredvid varje namn i arrayen som utlöser en metod för att ta bort objektet när en användare klickar på det:
<mall>
<ul>
<liv-för="(namn, index) i namn">
{{ namn }} -- {{ index }}
<knapp @klick="removeItem (index)">Avlägsnaknapp>
li>
ul>
mall>
De index parameter ger oss tillgång till index för var och en namn i arrayen, som detta program skickar som ett argument till ta bort sak metod. De ta bort sak metoden kan sedan använda splitsa metod för att ta bort en namn från namn array:
<manus>
export standard {
data() {
lämna tillbaka {
names: ['John', 'Doe', 'James'],
};
},
metoder: {
removeItem (index) {
this.names.splice (index, 1);
}
}
};
manus>
Ovanstående skript använder splitsa metod för att ta bort ett namn från den renderade namnlistan. Detta kommer automatiskt att uppdatera listan i användargränssnittet för att återspegla den uppdaterade arrayen.
Hur man renderar listor med nycklar i Vue
De nyckel attribut är ett unikt attribut som Vue använder för att spåra identiteten för varje objekt i listan. När ett objekt i listan ändras, med hjälp av nyckel attribut Vue kan snabbt uppdatera DOM utan att göra om hela listan.
Låt oss ta en titt på ett exempel på hur du renderar en lista med nycklar i Vue:
<mall>
<div>
<ul>
<liv-för="namn i namn":nyckel="namn.id">
{{ namn.namn }}
<knapp @klick="removeItem (name.id)">Avlägsnaknapp>
li>
ul>
div>
mall>
<manus>
export standard {
data() {
lämna tillbaka {
namn: [
{ id: 1, namn: "John"},
{ id: 2, namn: "Doe"},
{ id: 3, namn: "James"},
],
};
},
metoder: {
removeItem (nyckel) {
this.names.splice (nyckel - 1, 1);
},
},
};
manus>
I det här exemplet har du en lista med objekt med unika id egenskaper. Kodblocket använder nyckel attribut med v-för direktiv för att spåra identiteten för varje objekt i listan. Detta tillåter Vue att effektivt uppdatera DOM när listan ändras.
Om du skulle ta bort ett objekt från listan skulle Vue uppdatera DOM utan att behöva göra om hela listan. Detta beror på att Vue innehar identiteten för varje objekt i listan och kan bara uppdatera de objekt som har ändrats.
De nyckel attribut ska vara en unik identifierare för varje artikel i listan. Detta kan vara en id egendom eller någon annan unik identifierare som kan användas för att spåra föremålet.
Använda nyckel attribut med v-för direktiv hjälper till att undvika renderingsproblem. Till exempel, när du tar bort namnen, använder Vue nyckel attribut för att bibehålla ordningen på objekten i listan.
Vue-direktiv är väsentliga
Här täckte du grunderna för att rendera listor i Vue, inklusive att ta bort objekt från listor och rendera listor med nycklar. Du kan bygga responsiva gränssnitt som hanterar komplexa datalistor genom att förstå dessa begrepp.
Vue har en uppsjö av direktiv för olika ändamål, inklusive villkorlig rendering, händelsebindning och databindning. Att förstå dessa direktiv kan hjälpa dig att skapa effektiva interaktiva webbappar.
