Une introduction au rendu de liste dans Vue

L'une des tâches les plus courantes dans le développement Web consiste à afficher des listes de données. Vue gère cela avec l'aide du v-pour directif. Vous découvrirez ce qu'est la directive v-for, comment supprimer des éléments d'une liste et comment afficher des listes avec des clés.

Qu'est-ce que la directive v-for dans Vue?

Le v-pour est l'une des directives de Vue qui vous permet d'afficher des listes avec un minimum de code JavaScript. Le v-pour La directive fonctionne de manière similaire à la directive for boucle en JavaScript et peut itérer sur des tableaux et des objets pour afficher des éléments dans une liste.

Pour utiliser le v-pour directive, fournissez un tableau sur lequel vous souhaitez itérer dans la données propriété de la Objet Options dans Vue.

Par exemple:

<modèle>
<ul>
<liv-pour="nom dans les noms">{{ nom }}li>
ul>
modèle>
<scénario>
exporter par défaut {
 données() {
 retour {
 noms: ['John', 'Doe', 'James'],
 };
 },
};
scénario>

Le bloc de code ci-dessus illustre un exemple d'application Vue qui utilise le v-pour directive pour itérer sur la des noms tableau fourni dans le données propriété.

v-pour a une valeur définie sur une expression à deux parties: la variable d'itération (nom) et le des noms déployer v-pour pointe vers. La variable d'itération contient chaque nom dans le des noms tableau et affiche le nom.

Vue crée un nouveau Modèle d'objet de document (DOM) élément pour chaque nom dans le des noms tableau et le restitue sur la page Web.

Si la des noms changements de tableau (par exemple, un nouveau nom est ajouté ou un ancien est supprimé), Vue mettra automatiquement à jour le DOM virtuel et restituera la liste pour refléter les données mises à jour.

Vue offre également un moyen d'obtenir l'index d'un élément dans une liste.

<liv-pour="(nom, index) dans les noms">{{ nom }} -- {{ index }}li>

Le code ci-dessus décrit la syntaxe pour afficher l'index de chaque nom dans le des noms déployer.

Vous pouvez également utiliser le v-pour directive pour parcourir une plage de nombres :

<liv-pour="nombre sur 10">La vue est sympali>

Le code ci-dessus affichera une liste avec le texte La vue est sympa dix fois. Le v-pour La directive peut également parcourir une plage de nombres pour afficher de manière répétée des données ou effectuer une opération. Dans ce cas, le nombre La variable d'itération est utilisée pour accéder à l'élément courant dans la liste.

Comment supprimer des éléments d'une liste dans Vue

Vous pouvez autoriser les utilisateurs à supprimer des éléments des listes de votre application Web. Cette fonctionnalité est utile lors de la création d'applications telles qu'une liste de tâches.

Vous pouvez utiliser le épissure méthode JavaScript (c'est l'un des moyens de supprimer des éléments des tableaux) pour supprimer un élément d'une liste dans Vue.

tableau.splice (startIndex, numToRemove, newElements)

La méthode splice peut ajouter ou supprimer des éléments d'un tableau. La méthode splice prend les paramètres dans l'ordre suivant :

1. Le startIndex Le paramètre définit l'index auquel commencer à modifier le tableau.
2. numToRemove indique le nombre d'éléments que vous souhaitez supprimer du tableau.
3. Finalement, le nouveauxÉléments paramètre, que vous pouvez utiliser pour ajouter des éléments au tableau. Si aucun élément n'est spécifié, épissure() supprimera uniquement les éléments du tableau.

Pour utiliser la méthode splice pour supprimer un élément d'une liste dans Vue, vous devez connaître l'index de cet élément. Une façon d'y parvenir est de passer le indice comme argument d'une méthode qui gère la suppression de l'élément.

Par exemple, vous pouvez ajouter un bouton à côté de chaque nom dans le tableau qui déclenche une méthode pour supprimer l'élément lorsqu'un utilisateur clique dessus :

<modèle>
<ul>
<liv-pour="(nom, index) dans les noms">
 {{ nom }} -- {{ index }}
<bouton @Cliquez sur="supprimer l'élément (index)">Retirerbouton>
li>
ul>
modèle>

Le indice paramètre nous donne accès à l'index de chaque nom dans le tableau, que ce programme passe comme argument au retirer l'objet méthode. Le retirer l'objet méthode peut alors utiliser la épissure méthode pour supprimer un nom du des noms déployer:

<scénario>
exporter par défaut {
 données() {
 retour {
 noms: ['John', 'Doe', 'James'],
 };
 },
 méthodes: {
 removeItem (index) {
 this.names.splice (index, 1);
 }
}
};
scénario>

Le script ci-dessus utilise le épissure méthode pour supprimer un nom de la liste des noms rendus. Cela mettra automatiquement à jour la liste dans l'interface utilisateur pour refléter le tableau mis à jour.

Comment rendre des listes avec des clés dans Vue

Le clé L'attribut est un attribut unique que Vue utilise pour suivre l'identité de chaque élément de la liste. Lorsqu'un élément de la liste change, à l'aide de la clé L'attribut Vue peut rapidement mettre à jour le DOM sans restituer la liste entière.

Examinons un exemple de rendu d'une liste avec des clés dans Vue :

<modèle>
<div>
<ul>
<liv-pour="nom dans les noms":clé="nom.id">
 {{ nom nom }}
<bouton @Cliquez sur="removeItem (nom.id)">Retirerbouton>
li>
ul>
div>
modèle>
<scénario>
exporter par défaut {
 données() {
 retour {
 des noms: [
 { id: 1, nom: "Jean"},
 { id: 2, nom: "Doe"},
 { id: 3, nom: "James"},
 ],
 };
 },
 méthodes: {
 removeItem (clé) {
 this.names.splice (clé - 1, 1);
 },
 },
};
scénario>

Dans cet exemple, vous avez une liste d'éléments avec des identifiant propriétés. Le bloc de code utilise le clé attribut avec le v-pour directive pour suivre l'identité de chaque élément de la liste. Cela permet à Vue de mettre à jour efficacement le DOM lorsque la liste change.

Si vous deviez supprimer un élément de la liste, Vue mettrait à jour le DOM sans avoir à restituer la liste entière. En effet, Vue détient l'identité de chaque élément de la liste et ne peut mettre à jour que les éléments qui ont changé.

Le clé L'attribut doit être un identifiant unique pour chaque élément de la liste. Cela peut être un identifiant propriété ou tout autre identifiant unique pouvant être utilisé pour suivre l'élément.

En utilisant le clé attribut avec le v-pour directive permet d'éviter les problèmes de rendu. Par exemple, lors de la suppression des noms, Vue utilise le clé attribut pour maintenir l'ordre des éléments dans la liste.

Les directives Vue sont essentielles

Ici, vous avez couvert les bases du rendu des listes dans Vue, y compris la suppression d'éléments des listes et le rendu des listes avec des clés. Vous pouvez créer des interfaces réactives qui gèrent des listes de données complexes en comprenant ces concepts.

Vue a une pléthore de directives à des fins différentes, y compris le rendu conditionnel, la liaison d'événements et la liaison de données. La compréhension de ces directives peut vous aider à créer des applications Web interactives efficaces.