🔖

[Vue.js] インラインスタイルを使用する

2021/04/22に公開

クラスとスタイルのバインディング | Vue.js を少し噛み砕いた記事です、詳細が知りたい方はドキュメントを読みに行ってください。

一番下にサンプルを載せているのでわからなければ参考にしてください。

インラインスタイルの使い方

<div :style="{ color: 'red' }">サンプル</div>

<div
  :style="{ 'background-color': 'pink', fontSize: '20px' }"
>ハイフンが入る場合</div>

css のプロパティ名にハイフン-が含まれる場合はクオート'で囲むかcamelCase（つなぎ目を大文字にする）にする必要があります。
どちらにすべきということはありませんがcamelCaseの方を多く見かけるためcamelCaseを推奨します。

<div :style="{ color: textColor }">変数を使う</div>

data: { textColor: 'blue' }

<div :style="styleObject">変数をまとめる</div>

data: { styleObject: { color: 'yellow', backgroundColor: 'green' } }

Vue.js でインラインスタイルを使う時、に使ういくつかのポイントをドキュメントから抜き出してまとめました。
もっと詳しくって人はVue.jsのドキュメントを見に行ってください。

わからないことなどあればコメントや Twitter などで受け付けています。