Toggling av elementer i Vue

La oss nå lage en knapp som vil toggle et avsnitt, det vil si ved første klikk vise det, og ved andre klikk - skjule det. For å gjøre dette, ved klikk på knappen vil vi kalle en metode toggle:

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

I metodekoden må du ta verdien av egenskapen visible og invertere den til dens motsetning:

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