Shfaqja sipas kushtit në Vue

Direktiva tjetër që do të studiojmë quhet v-if. Me ndihmën e saj mund të shfaqim ose fshehim elementët. Si funksionon kjo direktivë: si parametër ajo pronë çdo veti të objektit data. Nëse kjo veti ka vlerën true - atëherë elementi do të jetë shfaqur, por nëse false - atëherë i fshehur.

Le të shohim një shembull. Le të themi se kemi një paragraf me atribut v-if. Vlera e këtij atributi le të jetë vetia visible, kështu:

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

Le të vendosim vlerën e vetisë sonë në true. Në këtë rast paragrafi do të shfaqet:

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

Por nëse visible vendoset në vlerë false, atëherë paragrafi do të fshihet:

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

Le të themi se në data ruhet vetia visible. Le të themi se keni gjithashtu dy paragrafe. Bëni që paragrafi i parë të shfaqet në ekran, nëse vetia visible është e barabartë me true, ndërsa paragrafi i dytë, përkundrazi, të shfaqet nëse vetia visible është e barabartë me false.