Come implementare il rendering condizionale in Vue.js

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 file 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-per, E 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 faresti rendere 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:

html>
<htmllang="it">
<Testa>
<titolo>Documentotitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<h1v-se='falso' >{{messaggio1}}h1>
<h1v-altro >{{messaggio2}}h1>
div>
<copione>
 const app = Vue.createApp({
 dati () {
 ritorno {
 message1: 'Questa è la tua app Vue.',
 message2: 'Non ancora un'app Vue.'
 }
 }
 })
 app.mount('#app')
copione>
corpo>
html>

Il blocco di codice sopra raffigura un'app Vue creata aggiungendo a Rete per la distribuzione di contenuti (CDN) link al corpo del tuo 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:

html>
<htmllang="it">
<Testa>
<titolo>App Vuetitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<divv-se="mostraUtenti">
<Ul>
<li>Utente1li>
<li>Utente2li>
Ul>
div>
<pulsantev-on: clic="toggleMostraUtenti()">
 Attiva/disattiva utenti
pulsante>
<h1>{{ Messaggio }}h1>
div>
<copione>
 const app = Vue.createApp({
 dati () {
 ritorno {
 showUsers: vero,
 messaggio: "Questa è la tua app Vue".
 }
 },
 metodi: {
 toggleMostraUtenti() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
copione>
corpo>
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:

<corpo>
<divid="app">
<divv-se="mostraUtenti">
<Ul>
<li>Utente1li>
<li>Utente2li>
Ul>
div>
<pulsantev-on: clic="toggleMostraUtenti()">
 Attiva/disattiva utenti
pulsante>
<h1v-spettacolo="mostraUtenti">{{ Messaggio }}h1>
div>
<copione>
 const app = Vue.createApp({
 dati () {
 ritorno {
 showUsers: vero,
 messaggio: "Questi sono gli utenti dell'app Vue"
 }
 },
 metodi: {
 toggleMostraUtenti() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
copione>
corpo>

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.