Reaktiivinen ehto Vue:ssa

Tehdään ehdosta reaktiivinen. Esimerkiksi tehdään niin, että elementti piilotetaan napin painalluksesta. Oletetaan, että meillä on seuraava kappale:

<template>
	<p v-if="visible">teksti</p>
</template>

Tehdään niin, että kappaleemme on aluksi näkyvissä:

data() {
	return {
		visible: true,
	}
}

Tehdään nyt painike, jota painamalla kappale piilotetaan:

<template>
	<button @click="hide">piilota</button>
	<p v-if="visible">teksti</p>
</template>

Sidottu metodi muuttaa ominaisuuden visible arvoksi false, saaden näin meidän kappaleemme piilotumaan:

methods: {
	hide: function() {
		this.visible = false;
	}
}

Annettu kappale ja painike. Olkoon kappale aluksi piilotettu. Tee painike, joka näyttää kappaleen.

Annettu kappale ja kaksi painiketta. Olkoon ensimmäinen painike näyttää kappaleen, ja toinen - piilottaa sen.

Muokkaa edellistä tehtävää niin, että näytöllä on aina vain yksi painike näkyvissä: jos kappale on näkyvissä, niin painike piilottamiseen, ja jos se on piilotettu, niin painike näyttämiseen.