Gennemløb af arrays i Vue

Vue tillader at danne tags i en løkke. Dette gøres ved hjælp af det specielle direktiv v-for. Lad os se, hvordan det fungerer for arrays. For at gøre dette, lad os oprette følgende array:

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

Lad os udskrive hvert element fra dette array i en separat afsnit. For at gøre dette i presentationen, lad os først lave et afsnit:

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

Lad os nu skrive direktivet v-for til vores afsnit. Værdien af dette direktiv skal angive navnet på arrayet, der gennemløbes, og variablen, som elementerne fra dette array successivt vil blive placeret i. I vores tilfælde vil arrayets navn være arr, og for variablen finder vi på navnet elem:

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

Som et resultat vil vores afsnit blive gentaget lige så mange gange, som der er elementer i vores array. Lad os udskrive de gennemløbne elementer i teksten i vores afsnit:

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