Классы из данных

Внешний вид элемента часто зависит от класса: распроданный торт серый, выбранный напиток выделен. С помощью :class классы берутся из данных. Обычно ему передают объект: каждое свойство — это название класса, а его значение говорит, есть ли у элемента этот класс:

<script setup>
const soldOut = true;
</script>

<template>
    <p class="cake" :class="{ sold: soldOut }">Чизкейк</p>
</template>

<style scoped>
.sold {
    color: #999;
    text-decoration: line-through;
}
</style>

Когда soldOut истинно, у абзаца есть класс sold, а когда ложно — нет. Обычный class="cake" остаётся в любом случае, и Vue складывает их вместе: на странице получается <p class="cake sold">. Поэтому классы, которые у элемента есть всегда, пишите в class, а зависящие от данных — в :class.

В объекте может быть больше классов, каждый со своим условием, и условием может быть любое выражение:

<p :class="{ sold: soldOut, cheap: price < 4 }">Чизкейк</p>

Название класса с дефисом нужно записывать в кавычках, как любой объект JavaScript: { 'gluten-free': glutenFree }. Без них приложение не запустится.

Когда данные меняются во время работы приложения, вместе с ними меняются и классы. На курсе JavaScript вы делали это через classList.add() и remove(); здесь вы меняете только данные.