Condición Reactiva en Vue

Hagamos que la condición sea reactiva. Por ejemplo, hagamos que el elemento se oculte al hacer clic en un botón. Supongamos que tenemos el siguiente párrafo:

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

Hagamos que nuestro párrafo se muestre inicialmente:

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

Ahora creemos un botón que, al hacer clic, ocultará el párrafo:

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

El método vinculado cambiará la propiedad visible a false, haciendo así que nuestro párrafo se oculte:

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