Vue.js Γ¨ un popolare framework JavaScript che semplifica la creazione di applicazioni web dinamiche. Vue.js puΓ² eseguire il rendering dei contenuti in base a dati ed eventi. CiΓ² Γ¨ particolarmente utile per creare interfacce utente reattive e interattive.
Scopri cosa sono le direttive Vue e come utilizzarle per ottenere il rendering condizionale in Vue.js.
Cosa sono le direttive Vue?
Le direttive Vue consentono di migliorare il comportamento degli elementi HTML nei modelli Vue.js aggiungendo loro attributi univoci.
Le direttive sono una parte fondamentale di Vue.js e forniscono un modo semplice e potente per manipolare il Document Object Model (DOM), aggiungere un comportamento dinamico agli elementi e gestire i dati.
Inoltre, Vue.js ti consente di creare direttive personalizzate, consentendoti di creare facilmente funzioni riutilizzabili per le app Vue.
Il framework Vue prefissa le sue direttive con βv-β prima del nome della direttiva. Esempi di direttive comunemente utilizzate in Vue includono v-on, v-bind, v-perE v-se.
Che cosβΓ¨ il rendering condizionale?
Il rendering condizionale consente di visualizzare o nascondere gli elementi in base alle condizioni specificate. Ad esempio, puoi utilizzare il rendering condizionale per mostrare un messaggio agli utenti solo se hanno inserito un indirizzo email valido.
In Vue.js, puoi utilizzare direttive come v-se E v-spettacolo per ottenere il rendering condizionale nella tua applicazione, diverso da come renderesti il ββcontenuto in modo condizionale in React.js.
Raggiungere la resa condizionale con la direttiva v-if
Simile a JavaScript se altro dichiarazione, il v-se direttiva in Vue.js contiene una condizione. Se non Γ¨ soddisfatto, Vue.js valuta la seguente condizione specificata in a v-altro direttiva e continua a farlo finchΓ© non soddisfa una condizione o valuta tutte le condizioni.
Questa direttiva consente di eseguire il rendering condizionale di un elemento in base a un valore booleano. Il compilatore Vue.js non eseguirΓ il rendering della parte se il suo valore Γ¨ falso.
Ecco un esempio di rendering condizionale del contenuto con v-se:
<!DOCTYPE html> <html lang="en"> <head> ββββ<title>Document</title> ββββ<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> ββββ<div id="app"> ββββββββ<h1 v-if='false' >{{ message1 }}</h1> ββββββββ<h1 v-else >{{ message2 }}</h1> ββββ</div> ββββ<script> ββββconst app = Vue.createApp({ ββββββββdata () { ββββββββββββreturn { ββββββββββββββββmessage1: 'This is your Vue App.', ββββββββββββββββmessage2: 'Not Yet a Vue App.' ββββββββββββ} ββββββββ} ββββ})
app.mount(β#appβ)
</script>
</body>
</html>
Il blocco di codice sopra raffigura unβapp Vue creata aggiungendo un collegamento CDN (Content Delivery Network) al corpo del file HTML. La direttiva v-if renderΓ lβelemento h1 solo se la sua condizione Γ¨ vera.
Nelle app Vue, ci sono situazioni in cui Γ¨ necessario eseguire il rendering di un componente in base a criteri dinamici specifici. CiΓ² Γ¨ utile in scenari come la visualizzazione di informazioni solo quando un utente fa clic su un pulsante o la visualizzazione di un indicatore di caricamento durante il caricamento dei dati da unβAPI.
Per esempio:
<!DOCTYPE html> <html lang="en"> <head> ββββ<title>Vue app</title> ββββ<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> ββββ<div id="app"> ββββββββ<div v-if="showUsers"> ββββββββββββ<ul> ββββββββββββββββ<li>User1</li> ββββββββββββββββ<li>User2</li> ββββββββββββ</ul> ββββββββ</div> ββββββββ<button v-on:click="toggleShowUsers()"> ββββββββββββToggle Users ββββββββ</button> ββββββββ<h1>{{ message }}</h1> ββββ</div> ββββ<script> ββββconst app = Vue.createApp({ ββββββββdata () { ββββββββββββreturn { ββββββββββββββββshowUsers: true, ββββββββββββββββmessage: 'This is your Vue App.' ββββββββββββ} ββββββββ}, ββββββββmethods: { ββββββββββββtoggleShowUsers() { ββββββββββββββββthis.showUsers = !this.showUsers ββββββββββββ} ββββββββ} ββββ})
app.mount(β#appβ)
</script>
</body>
</html>
Il blocco di codice sopra utilizza il file v-se direttiva per rendere condizionalmente il contenuto in base al valore di una variabile booleana, mostraUtenti.
IL div elemento viene visualizzato se il valore Γ¨ VERO e nascosto se lo Γ¨ falso. Facendo clic sul Attiva/disattiva utenti pulsante attiva il toggleMostraUtenti() metodo per modificare il valore di mostraUtenti.
Questo esempio usa anche il v-on direttiva per ascoltare gli eventi, ad esempio un evento clic sul pulsante. Rivaluta il v-se direttiva ogni volta che il valore di mostraUtenti i cambiamenti.
Ottenere il rendering condizionale con la direttiva v-show
IL v-spettacolo direttiva Γ¨ un altro modo per mostrare o nascondere gli elementi in Vue.js in modo condizionale. Γ simile al v-se direttiva in quanto puΓ² eseguire il rendering di elementi basati su unβespressione booleana. Tuttavia, esistono alcune differenze fondamentali tra le due direttive.
IL v-spettacolo direttiva non rimuove lβelemento dal DOM quando lβespressione restituisce false. Invece, usa i CSS per alternare gli elementi Schermo proprietΓ tra nessuno e il suo valore originario.
CiΓ² significa che lβelemento Γ¨ ancora presente nel DOM ma non Γ¨ visibile quando lβespressione Γ¨ falsa.
Ecco un esempio:
<body> ββββ<div id="app"> ββββββββ<div v-if="showUsers"> ββββββββββββ<ul> ββββββββββββββββ<li>User1</li> ββββββββββββββββ<li>User2</li> ββββββββββββ</ul> ββββββββ</div> ββββββββ<button v-on:click="toggleShowUsers()"> ββββββββββββToggle Users ββββββββ</button> ββββββββ<h1 v-show="showUsers">{{ message }}</h1> ββββ</div> ββββ<script> ββββconst app = Vue.createApp({ ββββββββdata () { ββββββββββββreturn { ββββββββββββββββshowUsers: true, ββββββββββββββββmessage: 'These are the users of the Vue app' ββββββββββββ} ββββββββ}, ββββββββmethods: { ββββββββββββtoggleShowUsers() { ββββββββββββββββthis.showUsers = !this.showUsers ββββββββββββ} ββββββββ} ββββ})
app.mount(β#appβ)
</script>
</body>
Il blocco di codice sopra utilizza il file v-spettacolo direttiva per visualizzare un messaggio che indica, βQuesti sono gli utenti dellβapp Vueβ ogni volta che fai clic sul pulsante di commutazione.
Scegliere tra v-if e v-show
Al momento di decidere se utilizzare il v-se E v-spettacolo direttive per mostrare o nascondere gli elementi in Vue.js in modo condizionale, ci sono alcuni fattori importanti da considerare.
Quando la condizione cambia raramente, usando il v-se direttiva va bene. Questo Γ¨ perchΓ© v-se rimuove lβelemento dal DOM quando la condizione Γ¨ falsa, il che puΓ² ostacolare prestazioni ottimali. Lβelemento viene visualizzato solo quando la condizione diventa vera e rimosso dal DOM quando la condizione diventa nuovamente falsa.
Dβaltra parte, se Γ¨ probabile che la condizione cambi frequentemente, Γ¨ meglio usare il v-spettacolo direttiva, che migliora le prestazioni. Questo Γ¨ perchΓ© v-spettacolo usa i CSS per nascondere o mostrare lβelemento alternando la proprietΓ display CSS tra none e block, lasciando lβelemento sempre visualizzato nel DOM.
Rendering condizionale nella tua app Vue semplificato
Hai imparato a eseguire il rendering dei contenuti in modo condizionale nelle app Vue con le direttive v-if e v-show. Utilizzando queste direttive, puoi eseguire rapidamente il rendering dei contenuti in base a varie condizioni, offrendoti un maggiore controllo sullβaspetto e sul comportamento dei tuoi componenti Vue.