Стили из данных

Иногда значение из данных идёт прямо в CSS: ширина полосы, цвет, который выбрал пользователь, размер. Для этого есть :style с объектом свойств CSS:

<script setup>
const size = 24;
const color = "#8b5e34";
</script>

<template>
    <p :style="{ fontSize: size + 'px', color: color }">Кафе «Уголок»</p>
</template>

Текст абзаца размером 24 пикселя, коричневый.

Названия свойств CSS пишут в camelCase, как с element.style на курсе JavaScript: fontSize для font-size, backgroundColor для background-color. (Названия из CSS тоже работают, в кавычках: { 'font-size': size + 'px' }.) Значение — это текст с единицей измерения, как в CSS: size + 'px' даёт 24px. Если указать просто число, { fontSize: size }, браузер получит 24 без единицы и проигнорирует его.

Используйте :style для значений, которые приходят из данных. Для оформления, которое всегда одинаково или просто включается и выключается, проще читается класс в <style scoped> с :class.