Uonyesho Kwa Masharti katika Vue

Diraktiva inayofuata, ambayo tutasoma, inaitwa v-if. Kwa kuitumia unaweza kuonyesha au kuficha vipengele. Diraktiva hii inafanyaje kazi: inakuboa parameta yoyote ya kipengele cha kitu data. Iwapo kipengele hiki kina thamani true - basi kipengele kitaonyeshwa, na ikiwa false - basi kitafichika.

Hebu tuangalie kwa mfano. Tuchukulie tuna kifungu chenye sifa v-if. Thamani ya sifa hii nichakuwa kipengele visible, kama ifuatavyo:

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

Wacha tuweke thamani ya kipengele chetu kuwa true. Katika kesi hii kifungu kitaonyeshwa:

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

Lakini ikiwa visible itawekwa kuwa thamani false, basi kifungu kitafichika:

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

Tuchukulie kwenye data kuna kipengele visible. Tuchukulie pia una vifungu viwili. Fanya ili kifungu cha kwanza kionekane kwenye skrini, ikiwa kipengele visible ni sawa na true, na kifungu cha pili, kinyume chake, kionekane ikiwa kipengele visible ni sawa na false.