Использование условной отрисовки

Завершено

При работе с приложениями, управляемыми данными, обычно требуется возможность обновления экрана на основе определенных значений. Может потребоваться изменить цвет, чтобы указать предупреждение, отключить недоступный параметр или не отобразить элемент управления. Vue.js предлагает несколько директив для управления тем, как и когда отображать элементы.

Переключение видимости

Вы можете управлять отображаемым элементом с помощью директивы v-show. v-show проверяет логическое значение или выражение, а затем определяет, следует ли отображать компонент. Как и можно ожидать, true означает, что он будет отображаться, а false значит, что он не будет отображаться.

Использование v-show с выражением, результатом которого является true или false, показано в следующем примере:

<div v-show="new Date().getMonth() < 3">It is the first quarter</div>

Примечание.

Допустимый код JavaScript можно использовать в любой директиве или в двойных фигурных скобках ({{ }}).

Булева логика

Vue.js поддерживает три директивы для реализации логики: v-if, v-else-if и v-else. Как и ожидалось, эти директивы идеально соответствуют традиционным ifelse ifоператорам и else операторам.

<div v-if="new Date().getMonth() < 3">It is the first quarter</div>
<div v-else-if="new Date().getMonth() < 6">It is the second quarter</div>
<div v-else-if="new Date().getMonth() < 9">It is the third quarter</div>
<div v-else>It is the fourth quarter</div>

Приведенные выше примеры работают, поскольку директивы if ведут себя так же, как блоки if в JavaScript. При обнаружении значения true блок закрывается. Таким образом, если возвращенный месяц — 2 за март (счет календарных месяцев начинается с 0), он будет тестироваться как true в первой строке и пропустит оценку следующих трех.