Stilizēšana caur style atribūtu Vue

CSS stilus var tieši pievienot caur atribūtu style. Lai to izdarītu, atribūtā tiek padots objekts, kurā vēlamās CSS īpašības ir šī objekta atslēgas, un atbilstošās CSS īpašību vērtības - šī objekta vērtības.

Piemēram, iekrāsosim kādu rindkopu sarkanā krāsā un pievienosim zaļas krāsas apmali:

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

Tagad tā vietā, lai iestatītu apmali, iestatīsim font-size uz 30px. Tā kā objektā nevar būt atslēgas ar defisu, mums tā jāieliek pēdiņās:

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

Var arī font-size vietā rakstīt fontSize - tas arī darbosies:

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

Dota rindkopa. Iekrāsojiet tās tekstu zaļā krāsā, un tās fonu - dzeltenā.

Dota rindkopa. Padariet tās tekstu treknrakstā un slīprakstā.