Vue-да шартты түрде көрсету

Біз зеттейтін келесі директива аты v-if. Оның көмегімен элементтерді көрсету немесе жасыруға болады. Бұл директива қалай жұмыс істейді: ол параметр ретінде data объектісінің кез келген қасиетін қабылдайды. Егер бұл қасиет true мәніне ие болса - онда элемент көрсетіледі, ал егер false болса - онда жасырылады.

Мысалға қарайық. Бізде v-if атрибуты бар абзац бар делік. Бұл атрибуттың мәні visible қасиеті болсын, мына түрде:

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

Біздің қасиетіміздің мәнін true деп орнатайық. Бұл жағдайда абзац көрсетіледі:

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

Ал егер visible мәнін false деп қойсақ, онда абзац жасырылады:

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

data-та visible қасиеті сақталсын делік. Сондай-ақ сізде екі абзац бар делік. Бірінші абзацтың экранда көрсетілуін жасаңыз, егер visible қасиеті true тең болса, ал екінші абзац, керісінше, visible қасиеті false тең болғанда көрсетілсін.