Afișare condiționată în Vue

Următoarea directivă pe care o vom studia se numește v-if. Cu ajutorul ei se pot afișa sau ascunde elemente. Cum funcționează această directivă: ca parametru primește orice proprietate a obiectului data. Dacă această proprietate are valoarea true - atunci elementul va fi afișat, iar dacă false - atunci va fi ascuns.

Să ne uităm la un exemplu. Să presupunem că avem un paragraf cu atributul v-if. Valoarea acestui atribut să fie proprietatea visible, astfel:

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

Să setăm valoarea proprietății noastre la true. În acest caz paragraful va fi afișat:

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

Iar dacă visible este setat la valoarea false, atunci paragraful va fi ascuns:

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

Să presupunem că în data este stocată proprietatea visible. Să presupunem că aveți de asemenea două paragrafe. Faceți astfel încât primul paragraf să fie afișat pe ecran, dacă proprietatea visible este egală cu true, iar al doilea paragraf, dimpotrivă, să fie afișat, dacă proprietatea visible este egală cu false.