Условни приказ у 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.