Třídy z dat

To, jak prvek vypadá, často mění třída: vyprodaný dort je šedý, vybraný nápoj zvýrazněný. Pomocí :class nastavíte třídy z dat. Obvykle mu dáte objekt: každá vlastnost je název třídy a její hodnota říká, jestli prvek tu třídu má:

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

<template>
    <p class="dort" :class="{ prodano: vyprodano }">Cheesecake</p>
</template>

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

Když vyprodano platí, má odstavec třídu prodano, a když neplatí, nemá ji. Obyčejné class="dort" zůstává v obou případech a Vue obojí spojí: stránka dostane <p class="dort prodano">. Třídy, které prvek má vždycky, proto pište do class a ty, které závisí na datech, do :class.

Objekt může mít víc tříd, každou s vlastní podmínkou, a podmínka může být jakýkoli výraz:

<p :class="{ prodano: vyprodano, levny: cena < 80 }">Cheesecake</p>

Název třídy se spojovníkem musí být v uvozovkách, stejně jako v každém objektu v JavaScriptu: { 'bez-lepku': bezLepku }. Bez nich aplikace nepoběží.

Když se data za běhu aplikace změní, změní se s nimi i třídy. V kurzu JavaScriptu jste na to používali classList.add() a remove(); tady jen změníte data.