Условный оператор

Часто страница должна показывать одно из двух в зависимости от данных: «открыто» или «закрыто», цену или «распродано». Для этого в JavaScript есть условный оператор, который записывается с вопросительным знаком и двоеточием:

condition ? valueIfTrue : valueIfFalse

JavaScript проверяет условие. Если оно истинно, всё выражение даёт значение после ?; если ложно — значение после :. В шаблоне это выглядит так:

<script setup>
const open = true;
const name = "Морковный торт";
const vegan = true;
</script>

<template>
    <p>Мы {{ open ? "открыты" : "закрыты" }}.</p>
    <p>{{ name }}{{ vegan ? " (веганский)" : "" }}</p>
</template>

Страница покажет Мы открыты. и Морковный торт (веганский). При const open = false; она покажет Мы закрыты., а при const vegan = false; — просто Морковный торт. Пустой текст "" ничего не показывает, поэтому второй абзац добавляет (веганский) только когда vegan истинно.

Условием может быть всё, что вы написали бы в if: price > 3, count === 1, open && !full. И оператор работает везде в JavaScript, а не только в шаблонах. Это короткий if/else, который даёт значение:

const status = open ? "открыто" : "закрыто";

Почему нельзя просто написать if прямо в скобках? Потому что в {{ }} допускаются только выражения, то есть код, дающий значение. if, for и const — это инструкции: они что-то делают, но значения не дают. С {{ if (open) { "открыто" } }} приложение не запустится, а сообщение под предпросмотром скажет Error parsing JavaScript expression: Unexpected token. Чтобы показать целый элемент только при истинном условии, в шаблонах есть v-if, с которым вы познакомитесь в уроке «Условия и списки».

Типичные ошибки:

• Без части после :, как в {{ open ? "открыто" }}, приложение не запустится: условному оператору всегда нужны оба значения. Если одно из них должно быть пустым, используйте "".