Прелаз кроз низове у 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.