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

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

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

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

<template>
	<p></p>
</template>

Цяпер напішам нашаму абзацу дырэктыву v-for. Значэннем гэтай дырэктывы варта ўказаць імя перабіраемага масіва і зменную, у якую паслядоўна будуць трапляць элементы гэтага масіва. У нашым выпадку імя масіва будзе arr, а для зменнай мы прыдумаем імя elem:

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

У выніку наш абзац паўторыцца столькі разоў, колькі элементаў у нашым масіве. Давайце будзем выводзіць перабіраемыя элементы ў тэксце нашых абзацаў:

<template>
	<p v-for="elem in arr">{{ elem }}</p>
</template>

Хай у data захоўваецца наступны масіў:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Выведзіце кожны элемент гэтага масіва ў уласным тэгу div.

Дадзены наступны масіў:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Выведзіце квадрат кожнага элемента гэтага масіва ў уласным тэгу div.

Дадзены наступны масіў:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Выведзіце элементы гэтага масіва ў выглядзе спісу ul.