Itération sur les tableaux dans Vue

Vue permet de générer des balises en boucle. Cela se fait à l'aide d'une directive spéciale v-for. Voyons comment elle fonctionne pour les tableaux. Pour cela, créons le tableau suivant :

javascriptdata() {
  return {
    arr: ['a', 'b', 'c'],
  }
}

Affichons chaque élément de ce tableau dans son propre paragraphe. Pour cela, dans le template, commençons par créer un paragraphe :

App.vue<template>
  <p></p>
</template>

Maintenant, ajoutons à notre paragraphe la directive v-for. La valeur de cette directive doit spécifier le nom du tableau à itérer et la variable qui contiendra successivement chaque élément de ce tableau. Dans notre cas, le nom du tableau est arr, et pour la variable, nous choisirons le nom elem :

App.vue<template>
  <p v-for="elem in arr"></p>
</template>

En conséquence, notre paragraphe se répétera autant de fois qu'il y a d'éléments dans notre tableau. Affichons les éléments itérés dans le texte de nos paragraphes :

App.vue<template>
  <p v-for="elem in arr">{{ elem }}</p>
</template>

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}