0Pricing
Vue Academy · Aula

Condicionais e loops

Renderize condicionalmente com v-if e listas com v-for.

Condicionais e loops é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

Renderização condicional

O Vue permite mostrar ou ocultar partes da interface com base nos dados.

  • v-if renderiza um elemento condicionalmente
  • v-else-if e v-else encadeiam condições
  • v-show alterna a visibilidade

v-if

A diretiva v-if renderiza um elemento somente quando sua expressão é avaliada como verdadeira.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if e v-else

Encadeie condições com v-else-if e v-else. Elas devem seguir diretamente um v-if.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show sempre renderiza o elemento, mas alterna sua propriedade de exibição do CSS.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if x v-show

A principal diferença:

  • v-if adiciona ou remove completamente o elemento do DOM
  • v-show mantém o elemento no DOM e apenas alterna sua exibição

Use v-show para elementos cuja exibição é alternada com frequência. Use v-if quando a condição mudar raramente ou quando o elemento for dispendioso.

v-for em vetores

A diretiva v-for renderiza uma lista iterando sobre um vetor.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for com índice

v-for também pode fornecer o índice de cada item.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

A importância de :key

Sempre forneça uma :key exclusiva ao usar v-for.

  • Ela ajuda o Vue a acompanhar a identidade de cada nó
  • Permite atualizações eficientes e corretas do DOM
  • Use um identificador exclusivo estável, não o índice do vetor quando os itens mudarem de ordem
<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Por que :key é importante

Sem uma chave adequada, o Vue pode reutilizar os elementos errados quando a lista mudar.

  • Os campos de formulário podem manter o valor errado
  • As animações podem apresentar falhas
  • O estado pode ser associado à linha errada

Uma chave estável e exclusiva evita esses erros.

v-for em objetos

v-for pode iterar sobre os valores das propriedades de um objeto, com chave e índice opcionais.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

Combinando v-for e condições

Para filtrar uma lista, prefira uma propriedade computada a colocar v-if no mesmo elemento que v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Verificação rápida

Teste sua compreensão sobre condicionais e repetições.

Recapitulação: condicionais e repetições

Você aprendeu sobre renderização de listas e condicional:

  • v-if / v-else-if / v-else renderizam condicionalmente
  • v-show alterna apenas a exibição
  • v-for itera sobre vetores e objetos
  • Sempre adicione uma :key exclusiva
  • Filtre listas com propriedades computadas

A seguir: vinculação de atributos e classes.

Perguntas Frequentes

A aula “Condicionais e loops” é grátis?

Sim — o texto completo de “Condicionais e loops” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Condicionais e loops”?

Renderize condicionalmente com v-if e listas com v-for. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.

Quanto tempo leva a aula “Condicionais e loops”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Interpolação e diretivas
  2. Condicionais e loops
  3. Vinculação de atributos e classes
← Voltar para Vue Academy