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