Рэактыўная ўмова ў 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;
  }
}