Vue-da massiwleri geçmek

Vue tegleri aýlawda döretmäge rugsat berýär. Bu ýörite v-for direktiwasy arkaly edilýär. Geliň, onuň massiwler üçin nähili işleýändigine göz aýlap geçeliň. Bunun üçin aşakdaky massiw ýasaýarys:

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

Geliň bu massiwdaky her bir element aýratyn abzasda görkezeliň. Bunun üçin görkezişde ilki bir abzas ýasaýarys:

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

Indi abzamyza v-for direktiwasyny ýazaýarys. Bu direktiwanyň gymmaty hökmünde geçilýän massiwüň adyny we onda yzygiderli birikdirilerýän üýtgeýän adyny görkezmek gerek. Bizim ýagdaýymyzda massiwüň ady arr, üýtgeýän ady üçin bolsa elem atyny oýlap tabarys:

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

Netijede, bizim abzasymyz massiwde näçe element bar bolsa şonça gezek gaýtalanar. Geliň geçilýän elementleri abzalarymyzyň tekstinde görkezeliň:

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