Ehdollinen näyttäminen Vuessa

Seuraava direktiivi, jonka opimme, on nimeltään v-if. Sen avulla voidaan näyttää tai piilottaa elementtejä. Miten tämä direktiivi toimii: parametrina se ottaa minkä tahansa data-objektin ominaisuuden. Jos tällä ominaisuudella on arvo true - niin elementti näytetään, ja jos false - niin piilotetaan.

Katsotaanpa esimerkkiä. Olkoon meillä kappale, jolla on v-if-attribuutti. Tämän attribuutin arvoksi olkoon ominaisuus visible, näin:

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

Asetetaanpa ominaisuutemme arvoksi true. Tässä tapauksessa kappale näytetään:

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

Mutta jos visible asetetaan arvoon false, niin kappale piilotetaan:

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

Olkoon data:ssa tallennettuna ominaisuus visible. Olkoon sinulla myös kaksi kappaletta. Tee niin, että ensimmäinen kappale näytetään näytöllä, jos ominaisuus visible on true, ja toinen kappale puolestaan näytetään, jos ominaisuus visible on false.