Condition réactive dans Vue

Rendons la condition réactive. Par exemple, faisons en sorte que l'élément se cache lors d'un clic sur un bouton. Supposons que nous ayons le paragraphe suivant :

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

Faisons en sorte que notre paragraphe soit initialement affiché :

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

Créons maintenant un bouton sur lequel cliquer pour masquer le paragraphe :

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

La méthode liée changera la propriété visible à false, forçant ainsi notre paragraphe à se cacher :

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