Итерација на низи во 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.