v-if vs v-show no Vue explicados

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:57

v-if vs v-show no Vue explicados

Curso de Vue.js

Clase 15 de 34

Clase 15 / 34

Recursos

A renderização condicional no Vue permite mostrar ou ocultar elementos da interface segundo uma condição lógica, algo essencial para construir aplicações web dinâmicas. Si trabalhas com Vue e precisas controlar quando um bloco aparece, esta é a base que vais usar todos os dias.

Como funciona a renderização condicional no Vue?

Quando construis uma interface, nem tudo deve aparecer ao mesmo tempo. O Vue resolve isto com diretivas que avaliam uma expressão e decidem se o elemento se mostra ou não.

No exemplo prático de um jogo de adivinhar números, queremos dar pistas ao jogador: dizer-lhe se o número que procura é maior, menor ou se já ganhou. Para isso, encostamos as diretivas diretamente nas tags do componente GameCounter.

¿Qué é a renderização condicional no Vue? É a capacidade de mostrar ou ocultar elementos do DOM consoante uma condição lógica, usando diretivas como v-if, v-show e v-else-if.

Qual é a diferença entre v-if e v-show no Vue?

Aqui está o ponto que confunde quem começa. Ambas as diretivas servem para condicionar a visibilidade, mas funcionam de forma muito diferente por baixo.

A diretiva v-show mantém sempre o elemento no DOM. Quando a condição é false, o Vue limita-se a aplicar display: none via CSS, ou seja, o elemento continua compilado e ativo, apenas não se vê.

A diretiva v-if, em contrapartida, decide se o elemento existe ou não. Se a condição for false, o Vue nem sequer renderiza essa tag no DOM. Se inspecionares o código, vais ver que o elemento simplesmente não está lá.

Usa v-show quando o elemento alterna a sua visibilidade frequentemente ou quando a acessibilidade importa.
Usa v-if quando o componente é complexo e a lógica de negócio exige que seja totalmente removido.
Combina v-if com v-else para mostrar um conteúdo por defeito quando a condição não se cumpre.

Cada caso pede uma escolha consciente, e isso vai definir tanto o desempenho como a manutenção do teu código.

Como usar v-else-if para criar lógica tipo switch?

Voltando ao jogo, queremos três mensagens possíveis: Procurar número maior, Procurar número menor e Ganhaste. Aqui entra o v-else-if, uma diretiva que funciona como um switch encadeado.

A lógica fica assim: se o contador for menor que numberToGuess, mostra-se Procurar número maior. Se essa condição falhar e o contador for maior que numberToGuess, então v-else-if toma conta e mostra Procurar número menor. Para a mensagem final de vitória, usa-se um v-show que aparece exatamente quando o jogador acerta.

html

<p v-if="counter < numberToGuess">Procurar número maior</p> <p v-else-if="counter > numberToGuess">Procurar número menor</p> <p v-show="counter === numberToGuess">Ganhaste</p>

Quando devo usar v-else-if? Quando tens várias condições mutuamente exclusivas e queres avaliar uma a seguir à outra, evitando escrever vários v-if separados.

Por que escolher v-show em vez de v-if por acessibilidade?

Leitores de ecrã e tecnologias assistivas dependem do DOM real para funcionar. Se ocultas conteúdo com v-if, esse conteúdo desaparece por completo, o que pode quebrar a navegação para utilizadores com necessidades especiais.

Com v-show, o elemento permanece no DOM com display: none, o que mantém referências e estados intactos. Por isso, sempre que a decisão for apenas estética ou de alternância simples, v-show costuma ser a escolha mais segura.

Quando faz sentido usar v-if mesmo assim?

Imagina um componente pesado, com chamadas a APIs, formulários complexos ou lógica de negócio que não deve correr até que o utilizador a ative. Aí, v-if brilha: o Vue não compila nem renderiza nada até a condição ser verdadeira, poupando recursos.

A decisão entre uma e outra resume-se a isto: queres ocultar visualmente ou queres remover por completo? Essa pergunta guia toda a tua escolha.

Que conceitos chave aparecem nesta aula?

Ao longo da explicação, há ideias técnicas que vale a pena fixar para dominares a renderização condicional no Vue.

Diretiva v-if: avalia uma condição e renderiza o elemento no DOM apenas se for verdadeira [0:35].
Diretiva v-show: alterna a visibilidade aplicando display: none, mantendo o elemento no DOM [0:50].
Diretiva v-else-if: encadeia condições adicionais quando a anterior falha, semelhante a um switch [2:30].
Diretiva v-else: define o conteúdo por defeito quando nenhuma condição anterior se cumpre [3:30].
DOM: estrutura onde o Vue decide compilar ou não o elemento, dependendo da diretiva escolhida [1:20].
Componente GameCounter: exemplo prático onde se aplica a lógica de adivinhar um número [0:25].

Agora tens o desafio na mão: pega num projeto teu e experimenta combinar v-if, v-else-if, v-else e v-show em casos reais. Conta nos comentários que cenário escolheste e qual diretiva resolveu melhor o teu problema.

Victor Reyes

Hace 10 meses

ok creeria que si la condicion es unica y sencilla por ejemplo un v-if, v-else puedo usar condiciones en el template pero si la condición es más de una simple comparación puedo usar un computed como la clase anterior me entraliza la lógica en un solo lugar y el template queda más limpio y fácil de mantener.

const message = computed(() => {

if (win.value) return '¡Felicidades! Has adivinado el número.';

if (counter.value < numberToGuess) return 'Busca numero mayor';

if (counter.value > numberToGuess) return 'Busca numero menor';

return '';

});

watch(counter, (newValue) => {

if (newValue === numberToGuess && !win.value) {

jsConfetti.addConfetti()

win.value = true;

}

});

</script>

<span class="number">{{ counter }}</span>

</div>

<p class="message">{{ message }}</p>

</div>

</template>

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

v-if vs v-show no Vue explicados