Quelle est l'utilité de l'instruction foreach dans vue

Vue.js est un framework front-end populaire, et ses excellentes performances ont attiré de plus en plus de développeurs. Dans Vue.js, l'instruction foreach est largement utilisée pour parcourir les données des tableaux et des objets. Ci-dessous, nous présenterons en détail comment utiliser l'instruction foreach dans Vue.js.

1. Parcours du tableau

Lorsque l'instruction foreach dans Vue.js est utilisée pour parcourir le tableau, elle est généralement implémentée à l'aide du v- pour l'instruction. La directive v-for est généralement placée sur les balises HTML qui doivent être parcourues. L'utilisation spécifique est la suivante :

<div>
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
</div>

Dans le code ci-dessus, l'instruction v-for parcourt chaque élément du tableau items et restitue la valeur de chaque élément dans le contenu texte de la balise li. Lors de l'itération, nous utilisons la variable item pour référencer chaque élément du tableau.

Pendant le processus de parcours du tableau, Vue.js nous fournit un deuxième paramètre facultatif, qui peut être utilisé pour référencer la valeur d'index de l'élément. Par exemple :

<div>
    <ul>
        <li v-for="(item, index) in items">{{ index }}：{{ item }}</li>
    </ul>
</div>

Dans le code ci-dessus, nous utilisons une variable nommée index pour faire référence à la valeur d'index de l'élément du tableau, et la restituons dans la balise li avec la valeur de l'élément du tableau.

2. Traversée d'objets

Contrairement aux tableaux, la forme syntaxique spéciale de la directive v-for doit être utilisée lors du parcours d'objets. Ce qui suit est un exemple simple :

<div>
    <ul>
        <li v-for="(value, key) in myObject">{{ key }}：{{ value }}</li>
    </ul>
</div>

Dans le code ci-dessus, nous utilisons l'objet myObject comme cible de traversée et utilisons les variables value et key pour référencer respectivement la valeur et la clé dans l'objet.

Semblable au deuxième paramètre utilisé pour les tableaux, nous pouvons également éventuellement utiliser un troisième paramètre pour fournir une valeur booléenne indiquant si l'élément actuel est un objet, comme suit :

<div>
    <ul>
        <li v-for="(value, key, index) in myObject">{{ index }}：{{ key }}={{ value }}</li>
    </ul>
</div>

#🎜🎜 #Dans le code ci-dessus, nous utilisons la variable index pour faire référence à la valeur d'index de l'élément actuel et la restituons dans la balise li avec la valeur de la clé de l'objet.

Parcourir les propriétés de l'objet

Dans Vue.js, vous pouvez également utiliser la directive v-for pour parcourir les propriétés de l'objet objet. Voici un exemple simple :

<div>
    <ul>
        <li v-for="prop in myObject">{{ myObject[prop] }}</li>
    </ul>
</div>

Dans le code ci-dessus, nous utilisons une variable prop pour référencer le nom de la propriété de l'objet et utilisons l'opérateur [] pour obtenir la valeur de la propriété de l'objet. De plus, nous pouvons également spécifier une condition de filtre lors du parcours et restituer uniquement les valeurs d'attribut qui remplissent les conditions :

<div>
    <ul>
        <li v-for="prop in myObject" v-if="myObject[prop] > 18">{{ myObject[prop] }}</li>
    </ul>
</div>

Dans le code ci-dessus, nous restituons uniquement les attributs de l'objet myObject dont l'attribut la valeur est supérieure à 18.

Ajouter une clé lors de la traversée

Enfin, il convient également de noter que lors de l'utilisation de l'instruction v-for pour parcourir un tableau ou un objet, Vue .js exige que chaque élément de parcours ait un attribut de clé unique. Le but de cet attribut clé est d'aider Vue.js à localiser plus rapidement les éléments de parcours modifiés lors du rendu du modèle.

Ce qui suit est un exemple spécifique :

<div>
    <ul>
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
</div>

Dans le code ci-dessus, nous utilisons la syntaxe de liaison :key pour spécifier une valeur de clé. Généralement, il est recommandé d'utiliser une chaîne unique comme valeur de clé plutôt que comme valeur d'index d'un tableau ou d'un objet.

Conclusion

Dans Vue.js, nous pouvons utiliser l'instruction foreach pour parcourir les données des tableaux et des objets, puis utiliser la directive v-for pour les restituer en un Page HTML. Lors de l'utilisation de la directive v-for, nous devons faire attention à l'ajout d'un attribut de clé unique à chaque élément parcouru lors de la traversée du tableau ou de l'objet pour aider Vue.js à suivre plus précisément les modifications des données. De plus, nous pouvons également utiliser les deuxième et troisième paramètres pour faire référence à la valeur d'index d'un tableau ou d'un objet ou pour déterminer si l'élément actuel est un objet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!