Elemente in Vue ein- und ausblenden

Lassen Sie uns nun einen Button erstellen, der einen Absatz ein- und ausblendet, also beim ersten Klick ihn anzeigt und beim zweiten Klick - versteckt. Dafür rufen wir beim Klick auf den Button die Methode toggle auf:

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

Im Code der Methode muss der Wert der Eigenschaft visible genommen und in seinen Gegenteil umgekehrt werden:

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