Condição Reativa no Vue

Vamos fazer com que a condição seja reativa. Por exemplo, vamos fazer com que o elemento seja ocultado ao clicar em um botão. Suponha que temos o seguinte parágrafo:

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

Vamos fazer com que nosso parágrafo seja mostrado inicialmente:

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

Agora, vamos criar um botão que, ao ser clicado, ocultará o parágrafo:

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

O método vinculado alterará a propriedade visible para false, fazendo com que nosso parágrafo seja ocultado:

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