Реактивен услов во 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;
  }
}