Stylowanie przez atrybut style w Vue

Style CSS można dodawać bezpośrednio przez atrybut style. Aby to zrobić, do atrybutu przekazywany jest obiekt, w którym pożądane właściwości CSS powinny być kluczami tego obiektu, a odpowiadające im wartości właściwości CSS - wartościami tego obiektu.

Dla przykładu pokolorujmy jakiś akapit na czerwono i dodajmy zieloną ramkę:

<template>
	<p :style="{color: 'red', border: '1px solid green'}">
		text
	</p>
</template>

Teraz zamiast ramki ustawmy mu font-size na 30px. Ponieważ w obiekcie nie może być klucza z myślnikiem, musimy wziąć go w cudzysłów:

<template>
	<p :style="{color: 'red', 'font-size': '30px'}">
		text
	</p>
</template>

Można również zamiast font-size napisać fontSize - to również będzie działać:

<template>
	<p :style="{color: 'red', fontSize: '30px'}">
		text
	</p>
</template>

Dany jest akapit. Pokoloruj jego tekst na zielono, a jego tło - na żółto.

Dany jest akapit. Spraw, aby jego tekst był pogrubiony i pochylony.