Перабор масіваў у Vue

Vue дазваляе фармаваць тэгі ў цыкле. Гэта робіцца з дапамогай спецыяльнай дырэктывы v-for. Давайце паглядзім, як яна працуе для масіваў. Для гэтага зробім наступны масіў:

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

Давайце вывядзем кожны элемент гэтага масіва ў асобным абзацы. Для гэтага ў прадстаўленні для пачатку зробім абзац:

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

Цяпер напішам нашаму абзацу дырэктыву v-for. Значэннем гэтай дырэктывы варта ўказаць імя перабіраемага масіва і зменную, у якую паслядоўна будуць трапляць элементы гэтага масіва. У нашым выпадку імя масіва будзе 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],
  }
}