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:
<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:
toggle: function() {
this.visible = !this.visible;
}
Det er gitt tre avsnitt og tre knapper. Gjør slik at hver knapp toggler sitt avsnitt.