Reactieve Voorwaarde in Vue
Laten we ervoor zorgen dat de voorwaarde reactief is. Laten we bijvoorbeeld regelen dat een element wordt verborgen bij het klikken op een knop. Stel dat we de volgende alinea hebben:
<template>
<p v-if="visible">tekst</p>
</template>
Laten we ervoor zorgen dat onze alinea initieel wordt getoond:
data() {
return {
visible: true,
}
}
Laten we nu een knop maken, waar bij het klikken de alinea wordt verborgen:
<template>
<button @click="hide">verbergen</button>
<p v-if="visible">tekst</p>
</template>
De gebonden methode zal de
eigenschap visible wijzigen naar false,
waardoor onze
alinea verdwijnt:
methods: {
hide: function() {
this.visible = false;
}
}
Gegeven een alinea en een knop. Laat de alinea initieel verborgen zijn. Maak een knop, die de alinea zal tonen.
Gegeven een alinea en twee knoppen. Laat de eerste knop de alinea tonen, en de tweede - deze verbergen.
Wijzig de vorige opdracht zodat er altijd slechts één van de knoppen zichtbaar is op het scherm: als de alinea getoond is, dan de knop voor verbergen, en als deze verborgen is - dan de knop voor tonen.
