Stylování pomocí atributu style ve Vue
CSS styly lze přímo přidávat
pomocí atributu style.
Pro tento účel se do atributu předává objekt, ve kterém musí být požadované
CSS vlastnosti klíči tohoto objektu,
a odpovídající hodnoty CSS vlastností -
hodnotami tohoto objektu.
Pojďme například obarvit nějaký odstavec na červenou a přidat zelený okraj:
<template>
<p :style="{color: 'red', border: '1px solid green'}">
text
</p>
</template>
Nyní mu místo okraje nastavme
font-size na 30px. Protože v
objektu nemůže být klíč s pomlčkou, musíme
ho vzít do uvozovek:
<template>
<p :style="{color: 'red', 'font-size': '30px'}">
text
</p>
</template>
Místo font-size lze také napsat
fontSize - to bude také fungovat:
<template>
<p :style="{color: 'red', fontSize: '30px'}">
text
</p>
</template>
Je dán odstavec. Obarvěte jeho text na zelenou barvu a jeho pozadí na žlutou.
Je dán odstavec. Udělejte jeho text tučným a kurzívou.
