Vue да шартли кўрсатиш

Биз ўрганадиган кейинги директива v-if деб аталади. Унинг ёрдамида элементларни кўрсатиш ёки яшириш мумкин. Бу директива қандай ишлайди: у параметр сифатида data объектининг istalayan хусусиятини қабул қилади. Агар бу хусусият true қийматига эга бўлса - элемент кўрсатилади, false бўлса - яширилади.

Келинг, мисолда кўрамиз. Бизда v-if атрибутига эга абзац бор дейлик. Бу атрибутнинг қиймати visible хусусияти бўлсин, мана бу шекилда:

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

Келинг, хусусиятимизнинг қийматини true га ўрнатамиз. Бу ҳолда абзац кўрсатилади:

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

Агар visible нинг қиймати false га ўрнатилса, абзац яширилади:

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

data да visible хусусияти сақлансин. Сизда иккита абзац бор дейлик. Биринчи абзац visible хусусияти true га тенг бўлганда экранда кўриниши учун, иккинчи абзац эса аксінча, visible хусусияти false га тенг бўлганда кўриниши учун тартиб беринг.