Iterera över arrayer i Vue

Vue låter dig skapa taggar i en loop. Detta görs med ett speciellt direktiv v-for. Låt oss se hur det fungerar för arrayer. För att göra detta, låt oss skapa följande array:

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

Låt oss visa varje element i denna array i ett separat stycke. För att göra detta, i vyn, låt oss först skapa ett stycke:

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

Nu skriver vi direktivet v-for till vårt stycke. Värdet på detta direktiv ska anges som namnet på arrayen som itereras över och variabeln i vilken elementen sekventiellt kommer att placeras. I vårt fall kommer arrayens namn att vara arr, och för variabeln kommer vi att välja namnet elem:

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

Som ett resultat kommer vårt stycke att upprepas lika många gånger som det finns element i vår array. Låt oss visa de itererade elementen i texten i våra stycken:

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