Een inleiding tot het weergeven van lijsten in Vue

Een van de meest voorkomende taken bij webontwikkeling is het weergeven van gegevenslijsten. Vue handelt dit af met behulp van de v-voor richtlijn. U zult onderzoeken wat de v-for-richtlijn is, hoe u items uit een lijst kunt verwijderen en hoe u lijsten met sleutels kunt weergeven.

Wat is de v-for-richtlijn in Vue?

De v-voor richtlijn is een van de richtlijnen van Vue waarmee u lijsten kunt weergeven met minimale JavaScript-code. De v-voor richtlijn werkt op dezelfde manier als de for lus in JavaScript en kan arrays en objecten herhalen om items in een lijst weer te geven.

Om gebruik te maken van de v-voor richtlijn, geeft u een array op die u wilt herhalen in de gegevens eigendom van de Opties-object in Vue.

Bijvoorbeeld:

<sjabloon>
<ul>
<liv-voor="naam in namen">{{ naam }}li>
ul>
sjabloon>
<script>
export standaard {
 gegevens() {
 opbrengst {
 namen: ['John', 'Doe', 'James'],
 };
 },
};
script>

Het bovenstaande codeblok toont een voorbeeld van een Vue-app die gebruikmaakt van de

v-voor richtlijn te herhalen over de namen array die wordt geleverd in de gegevens eigendom.

v-voor heeft een waarde ingesteld op een uitdrukking met twee delen: de iteratievariabele (naam) en de namen reeks v-voor wijst naar. De iteratievariabele bevat elk naam in de namen array en toont de naam.

Vue maakt een nieuw Documentobjectmodel (DOM) element voor elk naam in de namen array en geeft deze weer op de webpagina.

Als de namen array verandert (er wordt bijvoorbeeld een nieuwe naam toegevoegd of een oude verwijderd), zal Vue automatisch de virtuele DOM bijwerken en de lijst opnieuw weergeven om de bijgewerkte gegevens weer te geven.

Vue biedt ook een manier om de index van een element in een lijst te krijgen.

<liv-voor="(naam, index) in namen">{{ naam }} -- {{ index }}li>

De bovenstaande code geeft de syntaxis weer voor het weergeven van de index van elk naam in de namen reeks.

U kunt ook gebruik maken van de v-voor richtlijn om een ​​reeks getallen te doorlopen:

<liv-voor="getal op 10">Vue is leukli>

De bovenstaande code geeft een lijst weer met de tekst Vue is leuk tienmaal. De v-voor richtlijn kan ook een reeks getallen doorlopen om herhaaldelijk gegevens weer te geven of een bewerking uit te voeren. In dit geval de aantal iteratievariabele wordt gebruikt om toegang te krijgen tot het huidige item in de lijst.

Items verwijderen uit een lijst in Vue

U kunt gebruikers toestaan ​​items uit lijsten in uw web-app te verwijderen. Deze functie is handig bij het bouwen van apps zoals een takenlijst.

U kunt de splitsen JavaScript-methode (dat is een van de manieren van items uit arrays verwijderen) om een ​​item uit een lijst in Vue te verwijderen.

array.splice (startIndex, numToRemove, newElements)

De splice-methode kan items toevoegen aan of verwijderen uit een array. De splitsingsmethode neemt de parameters in de volgende volgorde op:

1. De startIndex parameter stelt de index in waarop moet worden begonnen met het wijzigen van de array.
2. numToRemove geeft het aantal items aan dat u uit de array wilt verwijderen.
3. eindelijk, de nieuwElementen parameter, die u kunt gebruiken om elementen aan de array toe te voegen. Als er geen elementen zijn opgegeven, splitsen() verwijdert alleen elementen uit de array.

Om de splice-methode te gebruiken om een ​​item uit een lijst in Vue te verwijderen, moet u de index van dat item kennen. Een manier om dit te bereiken is door de inhoudsopgave als een argument voor een methode die de verwijdering van het item afhandelt.

U kunt bijvoorbeeld naast elke naam in de array een knop toevoegen die een methode activeert om het item te verwijderen wanneer een gebruiker erop klikt:

<sjabloon>
<ul>
<liv-voor="(naam, index) in namen">
 {{ naam }} -- {{ index }}
<knop @Klik="item verwijderen (index)">Verwijderenknop>
li>
ul>
sjabloon>

De inhoudsopgave parameter geeft ons toegang tot de index van elk naam in de array, die dit programma als argument doorgeeft aan de Verwijder voorwerp methode. De Verwijder voorwerp methode kan dan gebruik maken van de splitsen methode om een naam van de namen reeks:

<script>
export standaard {
 gegevens() {
 opbrengst {
 namen: ['John', 'Doe', 'James'],
 };
 },
 methoden: {
 item verwijderen (index) {
 deze.namen.splitsing (index, 1);
 }
}
};
script>

Het bovenstaande script gebruikt de splitsen methode om één naam uit de lijst met gerenderde namen te verwijderen. Hierdoor wordt de lijst in de gebruikersinterface automatisch bijgewerkt om de bijgewerkte array weer te geven.

Lijsten weergeven met sleutels in Vue

De sleutel attribuut is een uniek attribuut dat Vue gebruikt om de identiteit van elk item in de lijst bij te houden. Wanneer een item in de lijst verandert, met behulp van de sleutel attribuut Vue kan de DOM snel bijwerken zonder de hele lijst opnieuw weer te geven.

Laten we eens kijken naar een voorbeeld van het renderen van een lijst met sleutels in Vue:

<sjabloon>
<div>
<ul>
<liv-voor="naam in namen":sleutel="naam.id">
 {{ naam naam }}
<knop @Klik="removeItem (naam.id)">Verwijderenknop>
li>
ul>
div>
sjabloon>
<script>
export standaard {
 gegevens() {
 opbrengst {
 namen: [
 { id: 1, naam: "Jan"},
 { id: 2, naam: "Doe"},
 { id: 3, naam: "James"},
 ],
 };
 },
 methoden: {
 verwijderItem (sleutel) {
 deze.benoemt.splitsing (sleutel - 1, 1);
 },
 },
};
script>

In dit voorbeeld heb je een lijst met items met unique ID kaart eigenschappen. Het codeblok gebruikt de sleutel attribuut met de v-voor richtlijn om de identiteit van elk item in de lijst te volgen. Hierdoor kan Vue de DOM efficiënt bijwerken wanneer de lijst verandert.

Als u een item uit de lijst zou verwijderen, zou Vue de DOM bijwerken zonder de hele lijst opnieuw te hoeven weergeven. Dit komt omdat Vue de identiteit van elk item in de lijst vasthoudt en alleen de items kan bijwerken die zijn gewijzigd.

De sleutel attribuut moet een unieke identificatie zijn voor elk item in de lijst. Dit kan een ID kaart eigenschap of een andere unieke identificator die kan worden gebruikt om het item te volgen.

De... gebruiken sleutel attribuut met de v-voor richtlijn helpt weergaveproblemen te voorkomen. Bij het verwijderen van de namen gebruikt Vue bijvoorbeeld de sleutel attribuut om de volgorde van de items in de lijst te behouden.

Vue-richtlijnen zijn essentieel

Hier heb je de basisprincipes behandeld van het weergeven van lijsten in Vue, inclusief het verwijderen van items uit lijsten en het weergeven van lijsten met sleutels. U kunt responsieve interfaces bouwen die complexe gegevenslijsten verwerken door deze concepten te begrijpen.

Vue heeft een overvloed aan richtlijnen voor verschillende doeleinden, waaronder voorwaardelijke weergave, gebeurtenisbinding en gegevensbinding. Als u deze richtlijnen begrijpt, kunt u efficiënte interactieve web-apps maken.