Vue 6: Renderizado condicional: v-if vs v-show
easy⏱ 5 mincoursevue
v-if elimina, v-show oculta
v-if elimina el elemento (y cualquier componente dentro) del DOM por completo cuando su condición es falsa — realmente no está ahí. v-show siempre renderiza el elemento y solo alterna display: none vía CSS, así que el elemento y su estado siguen vivos por debajo.
<!-- v-if: element doesn't exist in the DOM at all when false -->
<p v-if="isVisible">Now you see me</p>
<!-- v-show: element always exists, display:none when false -->
<p v-show="isVisible">Now you see me (via CSS)</p>
Cadenas v-else-if / v-else
Igual que un if / else if / else de JS, cada rama v-else-if o v-else debe estar en un elemento inmediatamente adyacente al v-if/v-else-if anterior en el template — Vue solo evalúa la primera rama cuya condición coincida.
<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 70">Grade: B</p>
<p v-else>Grade: C or below</p>
Cuándo usar cada uno
Usá v-show para cosas que se alternan seguido o rápido (tabs, tooltips), ya que evita reconstruir el DOM. Usá v-if para cosas que rara vez se muestran, son costosas de renderizar, o que no deberían existir hasta que se cumpla una condición — realmente evita la creación en vez de solo ocultarla.
Construí los paneles que alternan
Creá refs showIf, showShow y score. Alterná un panel con v-if, otro con v-show, y mostrá una nota usando v-if / v-else-if / v-else según score.