Wyświetlanie warunkowe w Vue

Następna dyrektywa, którą poznamy, nazywa się v-if. Za jej pomocą można pokazywać lub ukrywać elementy. Jak działa ta dyrektywa: jako parametr przyjmuje dowolną właściwość obiektu data. Jeśli ta właściwość ma wartość true - to element będzie wyświetlony, a jeśli false - to ukryty.

Spójrzmy na przykład. Załóżmy, że mamy akapit z atrybutem v-if. Wartością tego atrybutu niech będzie właściwość visible, o tak:

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

Ustawmy wartość naszej właściwości na true. W tym przypadku akapit będzie wyświetlony:

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

A jeśli ustawimy visible na wartość false, to akapit będzie ukryty:

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

Załóżmy, że w data przechowywana jest właściwość visible. Załóżmy, że masz także dwa akapity. Zrób tak, aby pierwszy akapit był wyświetlany na ekranie, jeśli właściwość visible jest równa true, a drugi akapit, przeciwnie, był wyświetlany, jeśli właściwość visible jest równa false.