Reaktiv betingelse i Vue
La oss gjøre slik at betingelsen blir reaktiv. For eksempel, la oss gjøre slik at elementet skjules ved et klikk på en knapp. La oss si at vi har følgende avsnitt:
<template>
<p v-if="visible">text</p>
</template>
La oss gjøre slik at avsnittet vårt initialt er vist:
data() {
return {
visible: true,
}
}
La oss nå lage en knapp, ved klikk på hvilken avsnittet skal skjules:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Den bundne metoden vil endre
egenskapen visible til false,
og dermed få avsnittet vårt
til å skjules:
methods: {
hide: function() {
this.visible = false;
}
}
Det er gitt et avsnitt og en knapp. La avsnittet være skjult initialt. Lag en knapp som vil vise avsnittet.
Det er gitt et avsnitt og to knapper. La den første knappen vise avsnittet, og den andre - skjule det.
Modifiser den forrige oppgaven slik at det alltid kun er én av knappene synlig på skjermen: hvis avsnittet er vist, så vises knappen for skjuling, og hvis det er skjult - så vises knappen for visning.
