【解説】Vue.jsでインラインスタイルを使う方法【サンプルあり】

2024年6月22日

記事内に広告を含みます

パソ君

・Vue.jsでインラインスタイルをデータバインディングして使う方法は？

こんな疑問にお答えします。

HTMLに直接インラインスタイルを書いて、CSSを効かす方法ありますよね。

Vue.jsにてデータバインディングをして、インラインスタイルを使う方法があります。

今回は自分用のメモとして、使い方をまとめてみました！

ジト

参考にどうぞ

ということで、この記事では「Vue.jsでインラインスタイルを使う方法」について解説していきます！

この記事でわかること

Vue.jsでデータバインディングしてインラインスタイルを使う方法

【解説】Vue.jsでインラインスタイルを使う方法【データバインディング】
【解説】Vue.jsでインラインスタイルを使う方法【サンプルあり】：まとめ

【解説】Vue.jsでインラインスタイルを使う方法【データバインディング】

データバインディングしてインスラインスタイルを使う方法として下記の順に解説していきます。

通常の書き方
プロパティをクオートで囲む書き方
変数を使った書き方
オブジェクトデータを使った書き方
実装したサンプル例

順に解説してきます。

①：通常の書き方

インスラインスタイルを当てたいタグに対して、「v-bind:style=””」のように記述します。

下記の感じ↓

<p v-bind:style="{color: 'blue', fontWeight: 'bold' }">テキスト</p>

値はクオートで囲んで指定します。

②：プロパティをクオートで囲む書き方

①の例では「fontWeight」のようにキャメルケースで記述していました。

実はクオートでプロパティを囲めば、「font-weight」のようにハイフンを入れた書き方も可能です。

<p v-bind:style="{color: 'blue', 'font-weight': 'bold' }">テキスト</p>

ただ①のキャメルケースを使う人が多いとのこと。

③：変数を使った書き方

変数に値を指定して、インスラインスタイルに適用させることも可能です。

<p v-bind:style="{color: color, fontSize: fz + 'px', fontWeight: weight}">テキスト</p>

const app = Vue.createApp({
  data: () => ({
    color: 'red',
    fz: 24,
    weight: 'bold'
  })
}).mount('#app')

④：オブジェクトデータを使った書き方

オブジェクトにまとめて指定して、インスラインスタイルに適用させることも可能です。

<p v-bind:style="inlineStyleObject">テキスト</p>

const app = Vue.createApp({
  data: () => ({
    inlineStyleObject: {
      color: 'red',
      fontSize: '24px',
      fontWeight: 'bold'
    }
  })
}).mount('#app')

⑤：実装したサンプル例

先述したやり方を使って、サンプルを作ってみました！

See the Pen vue　インラインスタイル① by jito-coder (@jito-coder) on CodePen.

<div id="app">
  <!-- 通常 -->
  <p><span v-bind:style="{color: 'red', fontWeight: 'bold'}">おはよう</span>ございます</p>
  <!-- クオートで囲む -->
  <p><span v-bind:style="{color: 'red', 'font-weight': 'bold'}">おはよう</span>ございます</p>
  <!-- 変数 -->
  <p><span v-bind:style="{color: color, fontSize: fz + 'px', fontWeight: weight}">おはよう</span>ございます</p>
  <!-- オブジェクトデータ -->
  <p><span v-bind:style="inlineStyleObject">おはよう</span>ございます</p>
</div>

const app = Vue.createApp({
  data: () => ({
    // 変数
    color: 'red',
    fz: 24,
    weight: 'bold',
    // オブジェクト
    inlineStyleObject: {
      color: 'blue',
      fontSize: '30px',
      fontWeight: 'bold'
    }
  })
}).mount('#app')

このような感じでVue.jsでインスラインスタイルを使用します。