Villkorsstyrd visning i Vue

Nästa direktiv vi ska studera heter v-if. Med dess hjälp kan man visa eller dölja element. Hur detta direktiv fungerar: det tar som parameter vilken som helst egenskap hos objektet data. Om denna egenskap har värdet true - så kommer elementet att vara visat, och om false - så dolt.

Låt oss titta på ett exempel. Antag att vi har ett stycke med attributet v-if. Låt värdet på detta attribut vara egenskapen visible, så här:

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

Låt oss sätta värdet på vår egenskap till true. I detta fall kommer stycket att visas:

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

Men om visible sätts till värdet false, så kommer stycket att döljas:

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

Antag att egenskapen visible lagras i data. Antag att du också har två stycken. Gör så att det första stycket visas på skärmen, om egenskapen visible är lika med true, och det andra stycket, tvärtom, visas om egenskapen visible är lika med false.