Prikaz s pogojem v Vue

Naslednja direktiva, ki jo bomo preučili, se imenuje v-if. Z njo lahko prikažemo ali skrijemo elemente. Kako ta direktiva deluje: kot parameter sprejme katero koli lastnost objekta data. Če ima ta lastnost vrednost true - bo element prikazan, če pa false - bo skrit.

Poglejmo si primer. Recimo, da imamo odstavek z atributom v-if. Vrednost tega atributa naj bo lastnost visible, takole:

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

Nastavimo vrednost naše lastnosti na true. V tem primeru bo odstavek prikazan:

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

Če pa visible nastavimo na vrednost false, bo odstavek skrit:

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

Naj v data hrani lastnost visible. Recimo, da imate tudi dva odstavka. Naredite tako, da je prvi odstavek prikazan na zaslonu, če je lastnost visible enaka true, drugi odstavek pa, nasprotno, prikazan, če je lastnost visible enaka false.