Condizione Reattiva in Vue

Rendiamo la condizione reattiva. Ad esempio, facciamo in modo che l'elemento venga nascosto cliccando su un pulsante. Supponiamo di avere il seguente paragrafo:

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

Facciamo in modo che il nostro paragrafo venga inizialmente visualizzato:

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

Creiamo ora un pulsante che, quando cliccato, nasconderà il paragrafo:

App.vue<template>
  <button @click="hide">nascondi</button>
  <p v-if="visible">testo</p>
</template>

Il metodo associato cambierà la proprietà visible in false, facendo così scomparire il nostro paragrafo:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}