v-show vs v-if en Vue: cuándo usar cada uno

Aprende a aplicar rendering condicional en Vue.js con precisión: cuándo usar v-show o v-if, qué impacto tienen en el DOM, y cómo combinarlos con v-else-if, v-else y v-bind para estados como stock, ofertas y modals. Todo explicado paso a paso, claro y directo.

¿Qué es el rendering condicional en Vue.js y por qué importa?

El rendering declarativo en Vue.js permite mostrar u ocultar elementos según un booleano o una comparación de JavaScript. Así controlas visibilidad y existencia real en el DOM sin manipulación manual. En el ejemplo, se gestiona el modal del carrito y los batches (etiquetas) de un producto según su estado.

• Usa valores booleanos o expresiones que retornen verdadero/falso.
• Controla elementos como el carrito, batches de “new” u “oferta”, y mensajes de stock.
• Evita lógica imperativa: todo fluye desde los datos.

¿Qué diferencia a v-show y v-if a nivel de DOM?

• v-show: siempre inserta el elemento en el DOM y aplica display: none cuando es falso. El elemento existe, solo está oculto.
• v-if: agrega o elimina el elemento del DOM según la condición. Es más “intrusivo” porque no deja rastro cuando es falso.

¿Cómo usar v-show de forma efectiva?

Cuando definiste cartOpen como estado del modal del carrito, v-show mostró u ocultó el contenido según su valor. Con false, Vue aplicó display: none; con true, retiró ese estilo y el contenido volvió a verse. Ideal para componentes que deben mantenerse montados.

• Úsalo si el elemento debe existir en el DOM pero ocultarse visualmente.
• Adecuado para modals, paneles colapsables o secciones que alternas con frecuencia.

<!-- Estado en data: cartOpen: true/false -->
<!-- Contenido del carrito controlado con v-show -->
<div class="cart-content" v-show="cartOpen">
  <!-- Productos del carrito -->
</div>

¿Cuándo no conviene en elementos pequeños?

Colocarlo en un botón puede ser menos útil si solo quieres removerlo por completo. En ese caso, v-if es más coherente con la intención de no mostrar ni mantener el nodo en el DOM.

¿Cuándo preferir v-if, v-else-if y v-else?

v-if decide si un nodo existe o no. Sirve para etiquetas como los batches de producto (por ejemplo, “new” u “oferta”) y para mensajes condicionales de stock. Si la condición es falsa, el elemento no se inserta en el DOM.

• Útil cuando el elemento no debe existir si no cumple la condición.
• Recomendado para piezas que no necesitan montarse hasta que sean necesarias.

¿Cómo mostrar batches de producto con v-if?

<!-- Muestra el batch “New” si product.new es true -->
<span class="batch new" v-if="product.new">New</span>

<!-- Muestra el batch “Oferta” si product.onSale es true -->
<span class="batch sale" v-if="product.onSale">Oferta</span>

Claves:

• Puedes alternar los estados product.new y product.onSale para ver cómo se insertan o desaparecen del DOM.
• Con v-if, si es falso, el nodo no existe; no es solo display: none.

¿Cómo encadenar condiciones con v-else-if y v-else?

Para el stock del producto, se mostraron mensajes específicos:

<p v-if="product.stock === 3">Quedan pocas unidades.</p>
<p v-else-if="product.stock === 2">El producto está por terminarse.</p>
<p v-else>La última unidad disponible.</p>

• Define mensajes claros por nivel de stock.
• Ordena las condiciones de más específica a más general.

¿Cómo deshabilitar el botón según el stock con v-bind?

Además, se aplicó v-bind (o su atajo :) para deshabilitar el botón cuando no hay unidades.

<button
  class="add-to-cart"
  :disabled="product.stock === 0"
  @click="addToCart(product)"
>
  Agregar al carrito
</button>

• Condición booleana que reacciona a product.stock.
• Con 0, el botón aparece deshabilitado automáticamente.

¿Tienes un caso específico de UI con modals, batches o estados de stock? Comparte en comentarios cómo decides entre v-show y v-if y qué patrón te ha dado mejor rendimiento y claridad.