Iterando Arrays em Vue

O Vue permite gerar tags em um loop. Isso é feito usando uma diretiva especial v-for. Vamos ver como ela funciona para arrays. Para isso, vamos criar o seguinte array:

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

Vamos exibir cada elemento deste array em um parágrafo separado. Para isso, na view (template), primeiro vamos criar um parágrafo:

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

Agora, vamos adicionar ao nosso parágrafo a diretiva v-for. O valor desta diretiva deve especificar o nome do array a ser iterado e a variável que receberá sequencialmente os elementos deste array. No nosso caso, o nome do array será arr, e para a variável, vamos escolher o nome elem:

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

Como resultado, nosso parágrafo se repetirá quantas vezes forem os elementos no nosso array. Vamos exibir os elementos iterados no texto dos nossos parágrafos:

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

Suponha que em data esteja armazenado o seguinte array:

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

Exiba cada elemento deste array em sua própria tag div.

Dado o seguinte array:

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

Exiba o quadrado de cada elemento deste array em sua própria tag div.

Dado o seguinte array:

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

Exiba os elementos deste array em forma de lista ul.