Vue'до шарт боюнча көрсөтүү

Кийинки биз үйрөнө турган директива v-if деп аталат. Анын жардамы менен элементтерди көрсөтүү же жашыруу мүмкүн. Бул директива кантип иштейт: ал параметр катары data объектисинин каалаган касиетин кабыл алат. Эгер ал касиет true маанисине ээ болсо - анда элемент көрсөтүлөт, ал эми эгер false болсо - анда жашырылат.

Келгиле, мисал аркылуу карап көрөлү. Бизде v-if атрибуту бар абзац бар деп коёлу. Бул атрибуттун мааниси катары visible касиети кызмат кылсын, мындайча:

<template>
	<p v-if="visible">текст</p>
</template>

Келгиле, биздин касиетибиздин маанисин true кылып койолу. Бул учурда абзац көрсөтүлөт:

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

Ал эми эгер visible ту false маанисине коюп койсок, анда абзац жашырылат:

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

data тар visible касиети сакталсын. Сизде ошондой эки абзац бар деп коёлу. Аны кылыңыз, биринчи абзац экранда көрсөтүлсүн, эгер visible касиети true барабар болсо, ал эми экинчи абзац, тескерисинче, көрсөтүлсүн, эгер касиет visible false барабар болсо.