Vue-da massivlarni aylantirish

Vue teglarni tsikl shaklida hosil qilishga imkon beradi. Buning uchun maxsus v-for direktivasidan foydalaniladi. Keling, u massivlar bilan qanday ishlashini ko'rib chiqaylik. Buning uchun quyidagi massivni yaratamiz:

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

Keling, ushbu massivning har bir elementini alohida abzatsda chiqaramiz. Buning uchun tasvir (template)da avvalo abzats yaratamiz:

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

Endi abzatsimizga v-for direktivasini yozamiz. Ushbu direktivaning qiymati sifatida aylantirilayotgan massivning nomi va ushbu massiv elementlari ketma-ket joylashtiriladigan o'zgaruvchi ko'rsatiladi. Bizning holatda massiv nomi arr, o'zgaruvchi uchun esa elem nomini topamiz:

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

Natijada bizning abzatsimiz massivdagi elementlar soni qadar takrorlanadi. Keling, aylantirilayotgan elementlarni abzatslarimiz matnida chiqaramiz:

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