Vue에서 style 속성을 통한 스타일링

CSS 스타일은 style 속성을 통해 직접 추가할 수 있습니다. 이를 위해서는 속성에 객체를 전달하며, 원하는 CSS 속성들이 이 객체의 키가 되어야 하고, 해당 CSS 속성 값들은 객체의 값이 되어야 합니다.

예를 들어 어떤 문단을 빨간색으로 칠하고 녹색 테두리를 추가해 보겠습니다:

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

이제 테두리 대신 font-size를 30px로 설정해 보겠습니다. 객체의 키에는 하이픈을 사용할 수 없으므로, 따옴표로 묶어야 합니다:

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

font-size 대신 fontSize로 작성할 수도 있습니다 - 이것도 동작합니다:

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

문단이 주어졌습니다. 텍스트 색상을 녹색으로, 배경을 노란색으로 칠하세요.

문단이 주어졌습니다. 텍스트를 굵게 그리고 기울이게 만드세요.