Обхождане на масиви във 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.