Stilning via style-attribut i Vue

CSS-stilar kan läggas till direkt via attributet style. För att göra detta skickas ett objekt in i attributet, där önskade CSS-egenskaper ska vara nycklar i detta objekt, och motsvarande värden för CSS-egenskaperna - värdena för detta objekt.

Låt oss som exempel måla något stycke i rött och lägga till en grön ram:

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

Låt oss nu istället för en ram sätta font-size till 30px. Eftersom ett objekt inte kan ha en nyckel med bindestreck måste vi sätta den inom citattecken:

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

Man kan istället för font-size skriva fontSize - det kommer också att fungera:

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

Ett stycke är givet. Färga dess text i grönt och dess bakgrund - i gult.

Ett stycke är givet. Gör dess text fet och kursiv.