# Директива v-show в Vue

Ещё одним вариантом условного отображения является директива `v-show`. Используется очень похоже:

`<template> <p v-show="isAuth"> +++ </p> </template>`

Отличия в том, что элемент с `v-show` будет всегда отрисовываться и оставаться в DOM, а переключаться будет лишь его CSS свойство `display`.

Директива `v-if` выполняет "настоящую" условную отрисовку, так как гарантирует, что слушатели событий и дочерние компоненты внутри блока должным образом уничтожаются и воссоздаются при переключениях условия.

Директива `v-if` также ленивая: если условие ложно на момент первоначальной отрисовки, то она ничего не сделает - условный блок не будет отрисован до тех пор, пока условие не станет истинным.

Для сравнения, `v-show` намного проще - элемент всегда отрисовывается, вне зависимости от исходного состояния с переключением на основе CSS.

В целом, у `v-if` выше затраты на переключение, в то время как `v-show` имеет больше затрат на первичную отрисовку. Так что используйте `v-show`, если переключения будут частыми, и предпочитайте `v-if`, если условие может и не измениться во время исполнения.

Директиву `v-show` нельзя использовать на элементе `template` и она не работает с `v-else`.

Дан абзац и кнопка. Сделайте так, чтобы абзац тогглился по нажатию на кнопку.

Расскажите, в чем отличия директив `v-show` и `v-if`.

Расскажите, когда лучше использовать директиву `v-show`, а когда - `v-if`.

Расскажите, какие ограничения имеет директива `v-show`.

←→
↑