Direttiva v-if in Vue.js

In questa lezione parleremo della direttiva v-if in Vue.js e delle direttive v-else, e v-else-if. Queste direttive sono degli strumenti potenti per la gestione condizionale del rendering degli elementi nell’interfaccia utente. Permettono di mostrare o nascondere elementi in base al verificarsi di determinate condizioni.

Dunque spieghiamo dettagliatamente queste direttive.

La direttiva v-if viene utilizzata per condizionare il rendering di un elemento in base al valore di un’espressione booleana. Se l’espressione valutata è vera, l’elemento verrà renderizzato; altrimenti, non verrà renderizzato.

<div v-if="condizione">
  <!-- Questo elemento verrà renderizzato solo se condizione è true -->
</div>

Direttiva v-if e v-else in Vue.js

La direttiva v-else è utilizzata insieme a v-if per definire il blocco di codice che deve essere renderizzato quando la condizione di v-if non è soddisfatta.

<div v-if="condizione">
  <!-- Questo elemento verrà renderizzato solo se condizione è true -->
</div>
<div v-else>
  <!-- Questo elemento verrà renderizzato se condizione è false -->
</div>

Direttiva v-if e v-else-if in Vue.js

La direttiva v-else-if è utilizzata per aggiungere ulteriori condizioni condizionali a seguito di una direttiva v-if o v-else-if precedente. Questo consente di gestire più condizioni in modo sequenziale.

<div v-if="condizione === 'A'">
  <!-- Questo elemento verrà renderizzato solo se condizione è 'A' -->
</div>
<div v-else-if="condizione === 'B'">
  <!-- Questo elemento verrà renderizzato solo se condizione è 'B' -->
</div>
<div v-else>
  <!-- Questo elemento verrà renderizzato se nessuna delle condizioni precedenti è soddisfatta -->
</div>

Esempio di v-if e v-else in Vue.js

Facciamo dunque un semplice esempio d’uso con la direttiva v-if e v-else in Vue.js.

<template>
  <div>
    <div v-if="isLoggedIn">
      Benvenuto, {{ username }}!
    </div>
    <div v-else>
      Non hai effettuato l'accesso!
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true, // Provate anche a mettere false
      username: "Paperino" // Impostiamo il nome utente
    };
  }
};
</script>

In questo esempio, nell’oggetto data del componente, abbiamo definito isLoggedIn come true, il che significa che l’utente è considerato già autenticato all’avvio dell’applicazione. Il nome utente username è impostato su "Paperino" per mostrare un esempio di utilizzo di dati dinamici.

Provate in un secondo momento a cambiare il valore di isLoggedIn e impostarlo a false, in modo da vedere il contenuto dell’elemento che ha la direttiva v-else.

Utilizzando la sintassi Composition API

Possiamo utilizzare la Composition API per gestire la logica di visibilità degli elementi nel nostro componente Vue.

Ecco come potrebbe apparire il nostro esempio con la direttiva v-if e v-else in Vue.js:

<template>
  <div>
    <div v-if="isLoggedIn">
      Benvenuto, {{ username }}!
    </div>
    <div v-else>
      Effettua l'accesso per vedere il contenuto.
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isLoggedIn = ref(true); // Impostiamo la visibilità iniziale
    const username = ref("Paperino"); // Impostiamo il nome utente

    return {
      isLoggedIn,
      username
    };
  }
};
</script>

In questo esempio, utilizziamo la Composition API fornita da Vue 3. All’interno della funzione setup(), utilizziamo la funzione ref per creare due riferimenti reattivi: isLoggedIn e username.

Esempio di v-if, v-else-if, v-else in Vue.js

Ecco un esempio completo utilizzando la direttiva v-if in Vue.js e le direttive v-else-if e v-else con l’opzione API:

<template>
  <div>
    <div v-if="status === 'online'">
      <p>Lo stato è online.</p>
    </div>
    <div v-else-if="status === 'offline'">
      <p>Lo stato è offline.</p>
    </div>
    <div v-else>
      <p>Lo stato non è definito.</p>
    </div>
    <button @click="changeStatus">Cambia stato</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'online' // Impostiamo lo stato iniziale
    };
  },
  methods: {
    changeStatus() {
      if (status.value === 'online') {
        status.value = 'offline';
      } else if (status.value === 'offline') {
        status.value = 'indefinito';
      } else {
        status.value = 'online';
      }
    }
  }
};
</script>

In questo esempio, abbiamo tre blocchi <div> che utilizzano v-if, v-else-if e v-else per condizionare il rendering in base allo stato definito dalla variabile status.

Se lo status è 'online', verrà mostrato il primo blocco <div>.
Altrimenti se lo status è 'offline', verrà mostrato il secondo blocco <div>.
Se lo status invece è 'indefinito', verrà mostrato il terzo blocco <div>.

La variabile status viene inizializzata a 'online' e può essere cambiata utilizzando la funzione changeStatus. Ogni volta che la funzione changeStatus viene chiamata, lo status viene alternato tra 'online', 'indefinito' e 'offline', facendo così cambiare il rendering condizionale degli elementi nel template.

Utilizzando la sintassi Composition API

Possiamo sviluppare lo stesso esempio utilizzando le Composition API, il template rimane sempre lo stesso, cambiamo solo script:

<script>
import { ref } from 'vue';

export default {
  setup() {
    const status = ref('online'); // Impostiamo lo stato iniziale

    // Funzione per cambiare lo stato
    const changeStatus = () => {
      if (status.value === 'online') {
        status.value = 'offline';
      } else if (status.value === 'offline') {
        status.value = 'indefinito';
      } else {
        status.value = 'online';
      }
    };

    return {
      status,
      changeStatus
    };
  }
};
</script>

In questo esempio dunque, abbiamo utilizzato la Composition API fornita da Vue 3. Abbiamo un riferimento reattivo status che tiene traccia dello stato corrente. La funzione changeStatus alterna lo stato tra ‘online’, ‘offline’ e indefinito ogni volta che il pulsante viene premuto.

La logica rimane simile all’approccio con l’opzione API, ma utilizziamo la Composition API per definire le variabili e i metodi all’interno di setup().

Conclusioni

In conclusione, abbiamo esaminato l’utilizzo della direttiva v-if in Vue.js e delle direttive v-else-if, e v-else per la gestione della logica condizionale nel rendering degli elementi nell’interfaccia utente.

v-if è utilizzata per renderizzare un elemento se una determinata condizione è vera.
La direttiva v-else-if è utilizzata per definire ulteriori condizioni condizionali dopo v-if.
v-else è utilizzata per renderizzare un elemento se nessuna delle condizioni v-if o v-else-if precedenti è vera.

Inoltre, abbiamo esaminato come utilizzare le direttive v-if, v-else-if, e v-else sia con l’opzione API che con la Composition API di Vue.js, fornendo esempi dettagliati di entrambi gli approcci.

Quindi, le direttive v-if, v-else-if, e v-else sono strumenti potenti che consentono di creare interfacce utente dinamiche e reattive in Vue.js, rendendo più semplice gestire la logica condizionale all’interno dei componenti.

>> Counter Vue.js

Direttiva v-for >>