Stilsetting via style-attributtet i Vue

CSS-stiler kan legges til direkte via style-attributtet. For å gjøre dette overføres et objekt til attributtet, der de ønskede CSS-egenskapene skal være nøklene til dette objektet, og de tilsvarende verdiene for CSS-egenskapene - verdiene til dette objektet.

La oss for eksempel fargelegge en avsnitt i rødt og legge til en grense i grønn farge:

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

La oss nå i stedet for en grense sette font-size til 30px. Siden i et objekt kan det ikke være en nøkkel med bindestrek, må vi sette den i anførselstegn:

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

Man kan også i stedet for font-size skrive fontSize - dette vil også fungere:

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

Det er gitt et avsnitt. Fargelegg teksten i grønn farge, og bakgrunnen - i gul.

Det er gitt et avsnitt. Gjør teksten fet og kursiv.