Masyvų iteravimas Vue

Vue leidžia kurti žymes cikle. Tai daroma naudojant specialią direktyvą v-for. Pažiūrėkime, kaip ji veikia su masyvais. Norėdami tai padaryti, sukurkime tokį masyvą:

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

Išveskime kiekvieną šio masyvo elementą atskiroje pastraipoje. Norėdami tai padaryti, pirmiausia sukurkime pastraipą:

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

Dabar pritaikykime mūsų pastraipai direktyvą v-for. Šios direktyvos reikšmėje turėtumėte nurodyti iteruojamo masyvo pavadinimą ir kintamąjį, į kurį paeiliui bus patalpinami šio masyvo elementai. Mūsų atveju masyvo pavadinimas bus arr, o kintamajam sugalvosime pavadinimą elem:

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

Dėl to mūsų pastraipa pakartos tiek kartų, kiek elementų yra mūsų masyve. Išveskime iteruojamus elementus mūsų pastraipų tekste:

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