Шартӣ намоиш дар 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 баробар бошад.