Attēlošana atkarībā no nosacījuma Vue

Nākamā direktīva, ko mēs apgūsim, saucas v-if. Ar tās palīdzību var attēlot vai paslēpt elementus. Kā šī direktīva strādā: parametrā tā pieņem jebkuru objekta data īpašību. Ja šī īpašība ir ar vērtību true - tad elements tiks attēlots, bet ja false - tad paslēpts.

Apskatīsim piemērā. Pieņemsim, ka mums ir rindkopa ar atribūtu v-if. Šī atribūta vērtību lai ir īpašība visible, šādi:

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

Uzstādīsim mūsu īpašības vērtību uz true. Šajā gadījumā rindkopa tiks attēlota:

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

Bet ja visible uzstāda uz vērtību false, tad rindkopa tiks paslēpta:

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

Pieņemsim, ka data glabājas īpašība visible. Pieņemsim, ka jums ir arī divas rindkopas. Veiciet tā, lai pirmā rindkopa tiktu attēlota ekrānā, ja īpašība visible ir true, bet otrā rindkopa, otrādi, lai tiktu attēlota, ja īpašība visible ir false.