Conditioneel tonen in Vue

De volgende directive die we gaan bestuderen, heet v-if. Met deze directive kun je elementen tonen of verbergen. Hoe deze directive werkt: als parameter accepteert het elke eigenschap van het object data. Als deze eigenschap de waarde true heeft - dan wordt het element getoond, en als het false is - dan wordt het verborgen.

Laten we een voorbeeld bekijken. Stel we hebben een alinea met het attribuut v-if. Laat de waarde van dit attribuut de eigenschap visible zijn, zoals hier:

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

Laten we de waarde van onze eigenschap instellen op true. In dit geval zal de alinea worden getoond:

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

Maar als je visible op de waarde false zet, dan zal de alinea worden verborgen:

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

Stel dat in data de eigenschap visible is opgeslagen. Stel dat je ook twee alinea's hebt. Zorg ervoor dat de eerste alinea op het scherm wordt getoond, als de eigenschap visible gelijk is aan true, en de tweede alinea, daarentegen, wordt getoond als de eigenschap visible gelijk is aan false.