Come implementare il rendering condizionale in Vue.js
Il rendering condizionale è una parte cruciale del template in qualsiasi linguaggio. Scopri l'approccio 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 ti 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-for e v-if.
Cos'è il rendering condizionale?
Il rendering condizionale consente di visualizzare o nascondere 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-if e v-show per ottenere il rendering condizionale nella tua applicazione, diverso da come renderesti i contenuti in modo condizionale in React .js.
Ottenere il rendering condizionale con la direttiva v-if
Similmente all'istruzione if...else JavaScript, la direttiva v-if in Vue.js mantiene una condizione. Se non è soddisfatto, Vue.js valuta la seguente condizione specificata in una direttiva v-else 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 è false.
Ecco un esempio di rendering dei contenuti in modo condizionale con v-if:
<!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 precedente utilizza la direttiva v-if per eseguire il rendering condizionale del contenuto in base al valore di una variabile booleana, showUsers.
L'elemento div viene visualizzato se il valore è true e nascosto se è false. Facendo clic sul pulsante Attiva/disattiva utenti si attiva il metodo toggleShowUsers() per modificare il valore di showUsers.
Questo esempio utilizza anche la direttiva v-on per ascoltare eventi, come un evento clic sul pulsante. Rivaluta la direttiva v-if ogni volta che cambia il valore di showUsers.
Ottenere il rendering condizionale con la direttiva v-show
La direttiva v-show è un altro modo per mostrare o nascondere gli elementi in Vue.js in modo condizionale. È simile alla direttiva v-if in quanto può riprodurre elementi in base a un'espressione booleana. Esistono tuttavia alcune differenze cruciali tra le due direttive.
La direttiva v-show non rimuove l'elemento dal DOM quando l'espressione restituisce false. Utilizza invece i CSS per alternare la proprietà display dell'elemento tra none e il suo valore originale.
Ciò significa che l'elemento è ancora presente nel DOM ma non è visibile quando l'espressione è false.
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 riportato sopra utilizza la direttiva v-show per visualizzare un messaggio che dice: "Questi sono gli utenti dell'app Vue" ogni volta che si fa clic sul pulsante di attivazione/disattivazione.
Scelta tra v-if e v-show
Quando si decide se utilizzare le direttive v-if e v-show per mostrare o nascondere gli elementi in Vue.js in modo condizionale, ci sono alcuni fattori importanti da considerare.
Quando la condizione cambia raramente, è opportuno utilizzare la direttiva v-if. Questo perché v-if 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 viene rimosso dal DOM quando la condizione diventa nuovamente falsa.
D'altra parte, se è probabile che la condizione cambi frequentemente, è meglio utilizzare la direttiva v-show, che migliora le prestazioni. Questo perché v-show utilizza i CSS per nascondere o mostrare l'elemento commutando la proprietà di visualizzazione CSS tra none e block, lasciando l'elemento sempre renderizzato nel DOM.
Il rendering condizionale nella tua app Vue è diventato semplice
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 componenti Vue.