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

←→
↑