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