Tutorial VueJS 3 – Rendering condizionale con v-if e v-show
verificato il 2 Settembre 2026 · 3 min
v-if crea o distrugge l'elemento, v-show lo lascia nel DOM e lo nasconde con display: none. Usa v-show per quello che si apre e si chiude spesso, v-if per tutto il resto. Le catene di condizioni passano da v-else-if e v-else.
Un negozio deve dire se il prodotto è disponibile. Vue offre due strumenti per mostrare o nascondere un elemento in base a una condizione: v-if e v-show. Si assomigliano, ma non fanno la stessa cosa.
Preparare la condizione
Aggiungi una scorta allo stato del componente:
<script setup>
import { ref } from 'vue'
const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
</script>v-if, v-else-if, v-else
v-if mette un elemento nella pagina solo se l’espressione è vera.
<p v-if="inventory > 10">En stock</p>Per coprire più casi, concatena con v-else-if e v-else:
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inventory > 10">En stock</p>
<p v-else-if="inventory > 0">Bientôt en rupture</p>
<p v-else>En rupture</p>
</div>Di questi tre paragrafi ne esiste uno solo alla volta. Porta inventory a 5, poi a 0, e guarda il messaggio cambiare.
v-else-if e v-else devono seguire direttamente l’elemento che porta il v-if. Basta un commento o un altro elemento in mezzo e Vue avvisa in console che il v-else non ha un v-if corrispondente.
Condizionare più elementi in una volta
Per applicare una condizione a un gruppo senza aggiungere un div inutile, metti il v-if su <template>. Questo tag non produce niente nell’HTML finale.
<template v-if="inventory > 0">
<h2>Disponible</h2>
<p>Expédié sous 48 heures.</p>
</template>v-show
v-show risponde alla stessa esigenza, con un meccanismo diverso:
<p v-show="inventory > 0">Livraison sous 48 h</p>L’elemento è sempre presente nel DOM. Quando la condizione è falsa, Vue gli applica semplicemente display: none. Apri l’ispettore per verificarlo:
<!-- inventory vaut 0, avec v-if : l’élément a disparu -->
<!--v-if-->
<!-- inventory vaut 0, avec v-show : l’élément est là, masqué -->
<p style="display: none;">Livraison sous 48 h</p>Quale scegliere
La differenza sta nel costo dell’operazione.
v-ifcrea e distrugge l’elemento, e con lui i componenti figli e il loro stato. Costo alto a ogni cambio, costo nullo quando la condizione è falsa.v-showsi limita a cambiare una proprietà CSS. Costo alto al primo rendering, perché l’elemento viene comunque costruito, costo quasi nullo ai cambi successivi.
In pratica: v-show per quello che si apre e si chiude spesso, come un menu o un pannello a scomparsa. v-if per tutto il resto, in particolare per ciò che costa caro da costruire o che in certi casi non deve proprio esistere.
Un elemento nascosto da v-show resta nell’HTML: chiunque lo legge nell’ispettore. Per quello che non deve essere visibile usa v-if e, soprattutto, non mandarlo al browser.
v-if e v-for sullo stesso elemento
Non combinarli sullo stesso tag. Il ciclo v-for è l’argomento del capitolo successivo. Da Vue 3 il v-if ha la priorità e viene valutato prima del ciclo: la variabile del ciclo non esiste ancora, e questo provoca un errore. Metti il v-if su un <template> interno, oppure filtra la lista in una proprietà calcolata. Vedremo entrambe le soluzioni al capitolo 7.
Identico. v-if e v-show sono direttive di template, cambia solo la forma della dichiarazione di inventory.
inventory è inferiore a 5, senza rompere gli altri messaggi. Poi verifica nell'ispettore che un elemento nascosto da v-show sia davvero presente nel DOM.Errori frequenti
<template> oppure filtra in una proprietà calcolata.