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.