Iterarea array-urilor în Vue

Vue permite generarea de tag-uri într-o buclă. Acest lucru se face folosind o directivă specială v-for. Să vedem cum funcționează pentru array-uri. Pentru aceasta, să creăm următorul array:

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

Să afișăm fiecare element al acestui array într-un paragraf separat. Pentru aceasta, în template pentru început să creem un paragraf:

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

Acum să scriem directivei v-for paragrafului nostru. Ca valoare a acestei directive trebuie indicat numele array-ului de iterat și variabila în care vor fi plasate succesiv elementele acestui array. În cazul nostru, numele array-ului va fi arr, iar pentru variabilă vom alege numele elem:

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

Ca rezultat, paragraful nostru se va repeta de atâtea ori câte elemente sunt în array-ul nostru. Să afișăm elementele iterate în textul paragrafelor noastre:

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],
  }
}