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>

段落が与えられています。そのテキストを緑色に、背景を黄色に塗りつぶしてください。

段落が与えられています。そのテキストを太字かつ斜体にしてください。