Prikaz uslovno u Vue

Sledeća direktiva koju ćemo izučiti zove se v-if. Pomoću nje možemo prikazati ili sakriti elemente. Kako ova direktiva radi: kao parametar prihvata bilo koje svojstvo objekta data. Ako ovo svojstvo ima vrednost true - onda će element biti prikazan, a ako je false - onda će biti sakriven.

Hajde da pogledamo primer. Neka imamo paragraf sa atributom v-if. Neka vrednost ovog atributa bude svojstvo visible, ovako:

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

Hajde da postavimo vrednost našeg svojstva na true. U ovom slučaju paragraf će biti prikazan:

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

A ako se visible postavi na vrednost false, onda će paragraf biti sakriven:

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

Neka u data bude sačuvano svojstvo visible. Neka imate takođe dva paragrafa. Uredite tako da prvi paragraf bude prikazan na ekranu, ako je svojstvo visible jednako true, a drugi paragraf, obrnuto, prikazan, ako je svojstvo visible jednako false.