Visualizzazione Condizionale in Vue

La prossima direttiva che studieremo si chiama v-if. Con essa è possibile mostrare o nascondere gli elementi. Come funziona questa direttiva: come parametro accetta qualsiasi proprietà dell'oggetto data. Se questa proprietà ha il valore true - l'elemento sarà mostrato, mentre se è false - sarà nascosto.

Vediamo un esempio. Supponiamo di avere un paragrafo con l'attributo v-if. Il valore di questo attributo sia la proprietà visible, in questo modo:

App.vue<template>
  <p v-if="visible">testo</p>
</template>

Impostiamo il valore della nostra proprietà a true. In questo caso il paragrafo sarà mostrato:

javascriptdata() {
  return {
    visible: true,
  }
}

Mentre se visible viene impostato al valore false, il paragrafo sarà nascosto:

javascriptdata() {
  return {
    visible: false,
  }
}