Приказ условно во Vue

Следната директива што ќе ја проучуваме се вика v-if. Со неа може да се прикажуваат или кријат елементи. Како функционира оваа директива: како параметар прифаќа кое било својство на објектот data. Доколку ова својство има вредност true - тогаш елементот ќе биде прикажан, а ако е false - тогаш ќе биде скриен.

Да погледнеме на пример. Нека имаме параграф со атрибут v-if. Вредноста на овој атрибут нека биде својството visible, вака:

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

Да ја поставиме вредноста на нашето својство на true. Во овој случај параграфот ќе биде прикажан:

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

А еве ако visible се постави на вредност false, тогаш параграфот ќе биде скриен:

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

Нека во data се чува својство visible. Нека имате и два параграфи. Направете така што првиот параграф да се прикажува на екранот, доколку својството visible е еднакво на true, а вториот параграф, обратно, да се прикажува доколку својството visible е еднакво на false.