Comment utiliser v-for pour itérer des objets et des tableaux dans Vue

Vue.js est un framework front-end très populaire. Il fournit de nombreuses instructions, composants et méthodes pour aider les développeurs à créer des applications Web efficaces et complexes. Parmi elles, v-for est l'une des instructions les plus couramment utilisées, qui nous permet d'utiliser des structures de boucles dans des modèles pour itérer rapidement et facilement les données dans des objets et des tableaux. Ci-dessous, nous présenterons en détail comment utiliser v-for pour itérer des objets et des tableaux dans Vue.

1. Itérer le tableau

Dans le modèle Vue, nous pouvons utiliser l'instruction v-for pour itérer les données du tableau. Son format de syntaxe est le suivant :

<div v-for="(item, index) in array" :key="item.id">{{ item.value }}-{{ index }}</div>

Parmi eux, item représente un élément du tableau, index représente l'index de l'élément actuel dans le tableau et array représente le tableau à itérer. Nous pouvons utiliser des parenthèses pour entourer l'élément et l'index, et utiliser le mot-clé in pour les séparer du nom du tableau.

Dans l'exemple ci-dessus, nous avons également utilisé l'attribut :key pour spécifier un identifiant unique pour chaque élément itéré afin d'améliorer les performances lors du nouveau rendu de Vue.

Si nous avons un tableau contenant des nombres comme :

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    }
  }
</script>

nous pouvons utiliser v-for dans le modèle pour parcourir dessus :

<ol>
  <li v-for="number in numbers" :key="number">{{ number }}</li>
</ol>

Ceci crée une liste ordonnée où chaque élément est un nombre dans le tableau.

En plus d'utiliser v-for dans les modèles pour restituer des tableaux, nous pouvons également traiter des tableaux dans les propriétés calculées de Vue, puis les utiliser dans des modèles. Par exemple, nous pouvons créer une propriété calculée pour filtrer les nombres pairs dans un tableau :

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter((number) => number % 2 === 0)
      }
    }
  }
</script>

<ol>
  <li v-for="number in evenNumbers" :key="number">{{ number }}</li>
</ol>

Cela créera une liste qui affichera uniquement les nombres pairs du tableau.

2. Itérer des objets

Semblable aux tableaux, Vue nous permet également d'utiliser v-for pour itérer les propriétés des objets. Son format de syntaxe est le suivant :

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

Parmi eux, value représente la valeur d'un attribut dans l'objet, key représente le nom de l'attribut et object représente l'objet à itérer.

Si nous avons un objet contenant des informations utilisateur, telles que :

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    }
  }
</script>

Nous pouvons utiliser v-for pour le parcourir et afficher les propriétés qu'il contient :

<dl>
  <dt>User info</dt>
  <dd v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</dd>
</dl>

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    },
    computed: {
      ageOver25() {
        return Object.keys(this.user)
          .filter((key) => key === 'age' ? this.user[key] > 25 : true)
          .reduce((obj, key) => {
            obj[key] = this.user[key]
            return obj
          }, {})
      }
    }
  }
</script>

<dl>
  <dt>User info (age over 25)</dt>
  <dd v-for="(value, key) in ageOver25" :key="key">{{ key }}: {{ value }}</dd>
</dl>

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!