Betinget visning i Vue

Det næste direktiv, vi vil studere, hedder v-if. Med det kan du vise eller skjule elementer. Sådan fungerer dette direktiv: det tager som parameter ethvert egenskab fra data-objektet. Hvis denne egenskab har værdien true - vil elementet blive vist, og hvis false - vil det blive skjult.

Lad os se på et eksempel. Lad os sige, at vi har et afsnit med attributten v-if. Lad værdien af denne attribut være egenskaben visible, sådan her:

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

Lad os sætte værdien af vores egenskab til true. I dette tilfælde vil afsnittet blive vist:

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

Men hvis visible sættes til værdien false, vil afsnittet blive skjult:

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

Lad egenskaben visible være gemt i data. Lad os også sige, at du har to afsnit. Gør sådan, at det første afsnit vises på skærmen, hvis egenskaben visible er true, og det andet afsnit derimod vises, hvis egenskaben visible er false.