🔖

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

commits1 min read

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

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

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

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

:v-bind:の省略でv-forなどと同じ Vue の構文です。

ハイフンが入る場合

<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 などで受け付けています。

GitHubで編集を提案

Discussion

ログインするとコメントできます