Iterando sobre listas com v-for
Olá, alunos! Bem-vindos à aula 5 de Diretivas Vue.js. Hoje, vamos aprender sobre a diretiva v-for
e como usá-la para iterar sobre listas.
O que é a diretiva v-for?
A diretiva v-for
permite iterar sobre uma lista e renderizar um elemento para cada elemento da lista.
Como usar a diretiva v-for?
A sintaxe básica da diretiva v-for
é a seguinte:
<elemento v-for="item in lista">
Onde:
elemento
é o elemento que você deseja renderizar para cada elemento da lista.item
é uma variável que representa o elemento atual da lista.lista
é a lista sobre a qual você deseja iterar.
Exemplo
Vamos ver um exemplo de como usar a diretiva v-for
para iterar sobre uma lista de tarefas:
<ul> <li v-for="tarefa in tarefas"> {{ tarefa }} </li> </ul>
No exemplo acima, a diretiva v-for
iterará sobre a lista tarefas
e renderizará um elemento li
para cada elemento da lista. A variável tarefa
representará o elemento atual da lista.
Outros exemplos
Vamos ver alguns outros exemplos de como usar a diretiva v-for
:
- Iterar sobre uma lista de nomes:
<ul> <li v-for="nome in nomes"> {{ nome }} </li> </ul>
- Iterar sobre uma lista de números:
<ul> <li v-for="numero in numeros"> {{ numero }} </li> </ul>
- Iterar sobre uma lista de objetos:
<ul> <li v-for="objeto in objetos"> {{ objeto.nome }} </li> </ul>
Expressões JavaScript na diretiva v-for
Você pode usar expressões JavaScript na diretiva v-for
para determinar como os elementos da lista são renderizados.
Por exemplo, vamos ver um exemplo de como usar a diretiva v-for
para iterar sobre uma lista de tarefas e exibir a data de criação da tarefa:
<ul> <li v-for="tarefa in tarefas"> {{ tarefa.dataCriacao }} </li> </ul>
No exemplo acima, a diretiva v-for
iterará sobre a lista tarefas
e renderizará o valor da propriedade dataCriacao
de cada elemento da lista.
Conclusão
A diretiva v-for
é uma ferramenta poderosa que pode ser usada para iterar sobre listas. Ela é uma das diretivas mais importantes do Vue.js e é essencial para aprender a usar o Vue.js.
No próximo módulo, vamos aprender sobre manipulação de eventos em Vue.js. Vamos aprender a ouvir eventos e responder a eventos.
Desafio
Aqui está um desafio para você:
- Crie um aplicativo Vue.js que exiba uma lista de tarefas. Cada tarefa deve conter o título da tarefa, a data de criação da tarefa e o status da tarefa.
Boa sorte!
Dica
Você pode usar a diretiva v-for
para criar um componente que pode ser usado para renderizar uma lista de qualquer tipo de dados.