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

Хајде да учинимо да услов буде реактиван. На пример, учинимо да се елемент сакрије при клику на дугме. Претпоставимо да имамо следећи пасус:

App.vue<template>
  <p v-if="visible">текст</p>
</template>

Учинимо да наш пасус у почетку буде приказан:

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

Направимо сада дугме, при клику на које ће пасус бити сакривен:

App.vue<template>
  <button @click="hide">сакриј</button>
  <p v-if="visible">текст</p>
</template>

Везана метода ће променити својство visible у false, чиме ће наш пасус бити сакривен:

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