Reaktywny warunek w Vue

Sprawmy, aby warunek był reaktywny. Na przykład zróbmy tak, aby element chował się po kliknięciu przycisku. Załóżmy, że mamy następujący akapit:

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

Sprawmy, aby nasz akapit początkowo był pokazany:

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

Stwórzmy teraz przycisk, po kliknięciu którego akapit będzie się ukrywał:

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

Powiązana metoda będzie zmieniać właściwość visible na false, tym samym powodując, że nasz akapit się ukryje:

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