Comment utiliser l'instruction v-for pour boucler des objets de sortie dans Vue

Dans Vue, v-for est une instruction qui peut être utilisée dans des modèles pour parcourir des tableaux ou des objets. La directive v-for est utilisée pour boucler les données de rendu et est l'une des instructions très utiles de Vue. Dans Vue, la manière d'utiliser l'instruction v-for pour boucler un objet est similaire à la façon de boucler un tableau, avec juste une légère différence.

Comment utiliser l'instruction v-for pour parcourir des objets ? Ci-dessous, nous l'expliquerons dans les parties suivantes.

1. Utilisation de base de l'instruction v-for

La syntaxe de base de l'instruction v-for est la suivante :

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

Parmi eux, les éléments signifie boucler Le tableau ou l'objet sur lequel opérer ; l'élément représente l'élément itéré ; l'index représente l'index de l'élément dans le tableau ou l'objet.

En prenant un tableau comme exemple, nous pouvons boucler les éléments du tableau comme ceci :

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

2. Bouclez les attributs dans l'objet de sortie

# 🎜🎜#Dans Vue , nous pouvons utiliser l'instruction v-for pour parcourir les attributs de l'objet. La méthode est la suivante :

<div v-for="(value,key,index) in object">{{ index }} - {{ key }}: {{ value }}</div>

Parmi eux, l'objet représente l'objet à afficher dans un. loop ; value représente la valeur de l'attribut en cours d'itération ; key représente l'itération en cours d'exécution. Le nom de l'attribut représente l'index de l'élément dans l'objet.

Regardons un exemple spécifique :

<template>
  <div>
    <div v-for="(value,key,index) in user">
      {{ index }} - {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  }
}
</script>

Le code ci-dessus parcourra les attributs de l'objet utilisateur et affichera l'index, le nom de l'attribut et l'attribut dans l'objet où l'attribut est localisé la valeur. Le résultat final est le suivant :

0 - name: 张三
1 - age: 20
2 - sex: 男

3. Utilisez l'instruction v-for pour calculer les attributs de manière itérative

Dans Vue, nous pouvons également utiliser l'instruction v-for pour calculer les attributs de manière itérative, ce qui est utile dans certains scénarios d'application spéciaux.

Par exemple, nous pouvons utiliser des propriétés calculées pour obtenir toutes les propriétés qui répondent aux conditions d'un objet. Le code spécifique est le suivant :

<template>
  <div>
    <div v-for="(value,key,index) in filteredUser">
      {{ index }} - {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  },
  computed: {
    filteredUser() {
      return Object.keys(this.user).reduce((result, key) => {
        if (key !== 'sex') {
          result[key] = this.user[key];
        }
        return result;
      }, {});
    }
  }
}
</script>

Le code ci-dessus utilisera les attributs calculés pour obtenir tous les attributs de l'objet utilisateur à l'exception de l'attribut sexe, et finalement affichera ces attributs dans une boucle. Le résultat final de la sortie est le suivant :

0 - name: 张三
1 - age: 20

Pour résumer, vous devez faire attention aux points suivants lorsque vous utilisez l'instruction v-for pour boucler des objets de sortie :

# 🎜🎜#Syntaxe de base de l'instruction v-for Semblable à la façon dont vous parcourez un tableau.

1. La boucle des propriétés dans l'objet de sortie nécessite l'utilisation de la syntaxe spécifique de la directive v-for.
2. Nous pouvons également utiliser des propriétés calculées pour obtenir des éléments qualifiés dans l'objet, puis utiliser l'instruction v-for pour une sortie itérative.

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!