Vue-да массивларни айланиш

Vue тегларни циклда шакллантиришга имкон беради. Бунга махсус v-for директиваси ёрдамлашади. Келинг, у қандай ишлашини массивлар учун кўрамиз. Бунинг учун куйидаги массивни ясаймиз:

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

Келинг, бу массивнинг ҳар бир элементини алаҳида абзацда чиқарайлик. Бунинг учун кўринишда аввало абзац ясаймиз:

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

Энди абзацимизга v-for директивасини ёзайлик. Унинг қиймати сифатида қайталанадиган массив номи ва у массив элементларини кетма-кет оладиган ўзгарувчи кўрсатилиши керак. Бизнинг ҳолимизда массив nomi arr бўлади, ўзгарувчи учун эса elem номини танлаймиз:

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

Натижада бизнинг абзацимиз массивдаги элементлар сонича такрорланади. Келинг, қайталанадиган элементларни абзацларимиз матнида чиқарайлик:

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