Basculer des éléments dans Vue

Créons maintenant un bouton qui basculera un paragraphe, c'est-à-dire qui l'affichera au premier clic et le cachera au second clic. Pour cela, au clic sur le bouton, nous appellerons une méthode toggle :

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

Dans le code de la méthode, il faudra prendre la valeur de la propriété visible et l'inverser en sa contraire :

javascripttoggle: function() {
  this.visible = !this.visible;
}