Štýlovanie cez atribút style vo Vue
CSS štýly je možné priamo pridávať
cez atribút style.
Na to sa do atribútu odovzdáva objekt, v ktorom želané
CSS vlastnosti musia byť kľúčmi tohto objektu,
a príslušné hodnoty CSS vlastností -
hodnotami tohto objektu.
Pre príklad namaľujme nejaký odsek na červenú farbu a pridajme rám zelenej farby:
<template>
<p :style="{color: 'red', border: '1px solid green'}">
text
</p>
</template>
Teraz mu namiesto rámu nastavme
font-size na 30px. Keďže v
objekte nemôže byť kľúč s pomlčkou, musíme
ho uviesť v úvodzovkách:
<template>
<p :style="{color: 'red', 'font-size': '30px'}">
text
</p>
</template>
Je tiež možné namiesto font-size napísať
fontSize - bude to tiež fungovať:
<template>
<p :style="{color: 'red', fontSize: '30px'}">
text
</p>
</template>
Daný odsek. Namaľujte jeho text na zelenú farbu, a jeho pozadie - na žltú.
Daný odsek. Urobte jeho text tučným a kurzívou.
