Vue.js: Exibindo listas (v-for)

Para exibirmos listas na programação Vue.js utilizamos a diretiva v-for. Nesta aula vamos entender o que é o v-for e porque ele é útil.

Nesta aula vamos aprender a sintaxe do v-for e como usá-lo para percorrer um array e exibir seus dados em uma tag HTML.

Assim como utilizamos o v-for para percorrer um array, também podemos fazer o mesmo para percorrer as propriedades de um objeto. Dessa forma conseguimos imprimir os nomes das propriedades e os seus respectivos valores.

Ao percorrer um array nem todos os seus elementos devem ser exibidos para o usuário. Um exemplo disso é um array que possui uma lista de produtos onde você só deve exibir para o usuário o que possui estoque.

Para focarmos no objetivo desse curso que é renderizar listas, vamos baixar um projeto base que conheceremos nesta aula.

Agora que já conhecemos nosso projeto base e já sabemos o que podemos melhorar nele, nesta aula vamos colocar em prática o v-for refatorando nosso projeto.