# Реактивное условие в Vue

Давайте сделаем так, чтобы условие было реактивным. К примеру сделаем так, чтобы элемент прятался по нажатию на кнопку. Пусть у нас есть следующий абзац:

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

Сделаем так, чтобы наш абзац изначально был показан:

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

Сделаем теперь кнопку, по нажатию на которую абзац будет скрываться:

`<template> <button @click="hide">hide</button> <p v-if="visible">text</p> </template>`

Привязанный метод будет менять свойство `visible` на `false`, тем самым заставляя наш абзац скрыться:

`methods: { hide: function() { this.visible = false; } }`

Дан абзац и кнопка. Пусть абзац изначально скрыт. Сделайте кнопку, которая будет показывать абзац.

Дан абзац и две кнопки. Пусть первая кнопка показывает абзац, а вторая - скрывает его.

Модифицируйте предыдущую задачу так, чтобы на экране всегда была видна только одна из кнопок: если абзац показан, то кнопка для сокрытия, а если скрыт - то кнопка для показа.

←→
↑