v-for Diretiva de Renderização de Listas
Última atualização: 2026-10-22
v-for Diretiva de Renderização de Listas
O v-for renderiza um grupo de elementos iterando um array ou objeto com a sintaxe item in items; forneça sempre uma key para atualizações eficientes.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
<!-- iteração de objeto -->
<div v-for="(value, key) in object"></div>⚙️ Argumentos
| expression | Dados iteráveis (array/objeto/número/string); o segundo argumento é o índice ou o nome da chave |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Three list items render: 1. HTML, 2. CSS, 3. JavaScript.💡 Pontos-chave
⚠️ Aviso Forneça sempre uma key única (use id, não o índice): índice como key desalinha estados ao inserir/remover itens.
⚠️ Aviso Não ponha v-for e v-if no mesmo elemento: separe com um template externo para o v-for e deixe o v-if no elemento interno.
💡 Dica Métodos de mutação de array (push/splice/sort etc.) são detectados automaticamente; atribuir diretamente arr[0] = x não dispara atualização.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que a key não pode ser escrita de qualquer jeito?
R A key é a forma de o Vue identificar a identidade dos nós: com índice como key, ao inserir/remover, o estado antigo gruda na linha errada.
P Por que arr[0] = x não dispara atualização?
R Os proxies do Vue 3 conseguem rastrear escritas por índice por meio do proxy reativo; arrays comuns não são observados.
P v-for e v-if podem ficar no mesmo elemento?
R Não é recomendado: o v-if roda primeiro e não tem acesso à variável do loop. Envolva com um template externo.
