Elementen in- en uitschakelen in Vue

Laten we nu een knop maken die een alinea in- en uitschakelt, dat wil zeggen bij de eerste klik deze laat zien, en bij de tweede klik - verbergt. Om dit te doen zullen we bij een klik op de knop de methode toggle aanroepen:

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

In de code van de methode moet je de waarde van de eigenschap visible nemen en deze inverteren naar zijn tegenovergestelde:

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