Reaktiv betingelse i Vue
Lad os gøre det sådan, at betingelsen er reaktiv. For eksempel, lad os gøre det sådan, at elementet skjules ved et klik på en knap. Lad os sige, at vi har følgende afsnit:
<template>
<p v-if="visible">text</p>
</template>
Lad os gøre så vores afsnit initialt vises:
data() {
return {
visible: true,
}
}
Lad os nu lave en knap, der ved et klik skjuler afsnittet:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Den bundne metode vil ændre
egenskaben visible til false,
hvilket får vores
afsnit til at skjule sig:
methods: {
hide: function() {
this.visible = false;
}
}
Der gives et afsnit og en knap. Lad afsnittet være skjult fra start. Lav en knap, som vil vise afsnittet.
Der gives et afsnit og to knapper. Lad den første knap vise afsnittet, og den anden - skjule det.
Modificer den forrige opgave sådan, at der altid kun er én af knapperne synlig på skærmen: hvis afsnittet vises, så knappen til at skjule, og hvis det er skjult - så knappen til at vise.
