Реактивно условие във Vue

Нека направим условието реактивно. Например, нека направим така, че елементът да се скрива при натискане на бутон. Нека имаме следния абзац:

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

Нека направим така, че нашият абзац първоначално да бъде показан:

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

Сега нека направим бутон, при натискане на който абзацът да се скрива:

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

Свързаният метод ще променя свойството visible на false, като по този начин кара нашия абзац да се скрие:

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