Feltételes megjelenítés Vue-ban

A következő direktíva, amelyet meg fogunk tanulni, a v-if. Segítségével megjeleníthetünk vagy elrejthetünk elemeket. A direktíva működése: paraméterként fogadja a data objektum bármely tulajdonságát. Ha ennek a tulajdonságnak a értéke true, akkor az elem megjelenik, ha pedig false, akkor elrejtődik.

Nézzünk egy példát. Tegyük fel, hogy van egy bekezdésünk a v-if attribútummal. Ennek az attribútumnak az értéke legyen a visible tulajdonság, így:

<template>
	<p v-if="visible">szöveg</p>
</template>

Állítsuk a tulajdonságunk értékét true-ra. Ebben az esetben a bekezdés megjelenik:

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

Ha viszont a visible értékét false-ra állítjuk, akkor a bekezdés elrejtődik:

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

Tegyük fel, hogy a data-ban tárolódik egy visible tulajdonság. Tegyük fel, hogy van továbbá két bekezdésed. Úgy állítsd be, hogy az első bekezdés jelenjen meg a képernyőn, ha a visible tulajdonság értéke true, a második bekezdés pedig éppen akkor jelenjen meg, ha a visible tulajdonság értéke false.