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:
<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:
toggle: function() {
this.visible = !this.visible;
}
Er zijn drie alinea's en drie knoppen. Zorg ervoor dat elke knop zijn eigen alinea in- en uitschakelt.
