Frontend Academy · Aula

Diretivas: v-if v-for v-bind v-on

Renderize condicionalmente com v-if e v-show, percorra itens com v-for, associe atributos dinamicamente com v-bind e escute eventos do DOM com v-on.

Diretivas: v-if v-for v-bind v-on é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que são as diretivas do Vue

Diretivas são atributos especiais com o prefixo v- que instruem o Vue a fazer algo com um elemento do DOM. Elas são avaliadas como expressões JavaScript e reagem a mudanças nos dados reativos.

v-if, v-else-if, v-else

v-if renderiza condicionalmente um elemento com base em uma expressão verdadeira. Quando a expressão é falsa, o elemento é completamente removido do DOM. v-else fornece a alternativa.

<div v-if="isLoggedIn">
  <UserDashboard />
</div>
<div v-else-if="isLoading">
  <Spinner />
</div>
<div v-else>
  <LoginForm />
</div>

v-show — Alternância de visibilidade

v-show alterna o CSS display: none em vez de adicionar ou remover o elemento do DOM. Utilize v-show quando a visibilidade do elemento alternar com frequência; utilize v-if quando a condição mudar raramente.

<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>

<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>

v-for — Renderização de listas

v-for="item in items" renderiza o elemento para cada item. Inclua sempre :key para garantir atualizações estáveis.

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} — {{ user.email }}
  </li>
</ul>

<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.title }}
</li>

v-for com objeto

Itere sobre os valores de um objeto ou sobre pares de chave e valor.

<dl>
  <template v-for="(value, key) in user" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </template>
</dl>

v-bind — Vinculação de atributos

v-bind:attr ou a forma abreviada :attr vincula dinamicamente um atributo HTML a um valor reativo.

<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>

Sintaxe de objeto do v-bind

Vincule vários atributos de uma só vez usando um objeto.

<input v-bind="{
  type: 'email',
  placeholder: 'Enter email',
  disabled: isSubmitting
}">

Vinculação de classes: :class

Vincule classes CSS condicionalmente com um objeto (chave = nome da classe, valor = condição) ou com um array.

<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>

<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"

Vinculação de estilos: :style

Vincule estilos em linha com um objeto em camelCase.

<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">

v-on — Escuta de eventos

v-on:event ou a forma abreviada @event adiciona ouvintes de eventos.

<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>

Modificadores de eventos

O Vue fornece modificadores de eventos integrados: .prevent (preventDefault), .stop (stopPropagation), .once (é executado uma vez), .self (somente quando o destino é o próprio elemento), .passive (melhora o desempenho da rolagem).

<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">

Verificação rápida

Quando você deve usar v-show em vez de v-if?

Recapitulação: diretivas do Vue

v-if remove ou adiciona elementos ao DOM. v-show alterna a exibição. v-for renderiza listas (sempre use :key). v-bind (:) vincula atributos, :class e :style. v-on (@) adiciona ouvintes de eventos. Modificadores de eventos .prevent, .stop e .once. v-model para vinculação bidirecional (combina v-bind:value e v-on:input).

Perguntas Frequentes

A aula “Diretivas: v-if v-for v-bind v-on” é grátis?

Sim — o texto completo de “Diretivas: v-if v-for v-bind v-on” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Diretivas: v-if v-for v-bind v-on”?

Renderize condicionalmente com v-if e v-show, percorra itens com v-for, associe atributos dinamicamente com v-bind e escute eventos do DOM com v-on. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 3 de 4.

Quanto tempo leva a aula “Diretivas: v-if v-for v-bind v-on”?

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 Frontend Academy?

Sim. Cada aula de Frontend 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

← Voltar para Frontend Academy