Iterating over arrays in Vue

Vue allows you to form tags in a loop. This is done using a special directive v-for. Let's see how it works for arrays. To do this, we will create the following array:

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

Let's output each element of this array in a separate paragraph. To do this, first make a paragraph in the view:

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

Now let's write a directive v-for for our paragraph. The value of this directive should be the name of the array being iterated over and the variable into which the elements of this array will be successively placed. In our case, the array name will be arr, and for the variable we will come up with the name elem:

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

As a result, our paragraph will be repeated as many times as there are elements in our array. Let's output the elements being iterated in the text of our paragraphs:

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

Let data store the following array:

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

Output each element of this array in its own div tag.

The following array is given:

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

Print the square of each element of this array in your div tag.

The following array is given:

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

Print the elements of this array as a list ul.