Condiție Reactivă în Vue

Haideți să facem condiția reactivă. De exemplu, să facem astfel încât elementul să se ascundă la click pe un buton. Să presupunem că avem următorul paragraf:

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

Să facem astfel încât paragraful nostru să fie afișat inițial:

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

Să creăm acum un buton, la apăsarea căruia paragraful va fi ascuns:

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

Metoda asociată va schimba proprietatea visible în false, făcând astfel paragraful nostru să dispară:

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