Styly z dat

Někdy jde hodnota z dat rovnou do CSS: šířka pruhu, barva, kterou si uživatel vybral, nebo velikost. Na to je :style s objektem vlastností CSS:

<script setup>
const velikost = 24;
const barva = "#8b5e34";
</script>

<template>
    <p :style="{ fontSize: velikost + 'px', color: barva }">Kavárna Na Rohu</p>
</template>

Text odstavce bude velký 24 pixelů a hnědý.

Názvy vlastností CSS se píšou v camelCase, stejně jako u prvek.style v kurzu JavaScriptu: fontSize místo font-size, backgroundColor místo background-color. (Názvy z CSS fungují také, v uvozovkách: { 'font-size': velikost + 'px' }.) Hodnota je text i s jednotkou, jako v CSS: velikost + 'px' dá 24px. Se samotným číslem, { fontSize: velikost }, dostane prohlížeč 24 bez jednotky a nepoužije ho.

:style používejte pro hodnoty, které přicházejí z dat. Pro vzhled, který je pořád stejný nebo se jen zapíná a vypíná, je přehlednější třída v <style scoped> a :class.