Styling via the style attribute in Vue

CSS styles can be added directly via the attribute style. To do this, an object is passed to the attribute, in which the desired CSS properties should be the keys of this object, and the corresponding values of the CSS properties should be the values of this object.

Let's color a paragraph red and add a green border as an example:

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

Now let's set its border from font-size to 30px. Since an object can't have a key with a hyphen, we have to put it in quotes:

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

You can also write font-size instead of font-size - this will also work:

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

Given a paragraph, color its text green and its background yellow.

Here is a paragraph. Make its text bold and italic.