Masīvu iterācija Vue

Vue ļauj veidot elementus cilpā. Tas tiek darīts, izmantojot īpašu directīvu v-for. Apskatīsim, kā tā strādā ar masīviem. Lai to izdarītu, izveidosim šādu masīvu:

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

Izvadīsim katru šī masīva elementu atsevišķā rindkopā. Lai to izdarītu, skatā sākumā izveidosim rindkopu:

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

Tagad pievienosim mūsu rindkopai directīvu v-for. Šīs directīvas vērtībā jānorāda iterējamā masīva nosaukums un mainīgais, kurā secīgi tiks ievietoti šī masīva elementi. Mūsu gadījumā masīva nosaukums būs arr, un mainīgajam mēs izdomāsim nosaukumu elem:

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

Rezultātā mūsu rindkopa atkārtosies tik reižu, cik elementu ir mūsu masīvā. Izvadīsim iterētos elementus mūsu rindkopu tekstā:

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