Vue v-bind

Volardev 編集部 April 28, 2026

基本的な Vue のセットアップは Vue インスタンスで構成されており、<div id="app"> タグから {{ }}（マスタッシュ構文）や v-bind ディレクティブを使用してアクセスできることはすでにご存知かと思います。

このページでは、v-bind ディレクティブについてより詳細に解説します。

1. v-bind ディレクティブ

v-bind ディレクティブを使用すると、HTML 属性を Vue インスタンス内のデータにバインド（紐付け）することができます。これにより、属性値を動的に変更することが容易になります。

<div v-bind:[属性名]="[Vue のデータ]"></div>

<img> タグの src 属性値を、Vue インスタンスのデータプロパティである url から取得する例です。

<img v-bind:src="url">

v-bind ディレクティブを使用すると、インラインスタイルの適用やクラスの動的な変更が可能になります。このセクションではその基本を簡潔に紹介し、後の「CSS バインディング」のページでさらに詳しく解説します。

Vue でインラインスタイルを適用するには、style 属性を v-bind で Vue にバインドします。
v-bind ディレクティブの値として、CSS プロパティと値をペアにした JavaScript オブジェクトを記述します。

例：フォントサイズを Vue のデータプロパティ size に依存させる場合

<div v-bind:style="{ fontSize: size }">
  テキストの例
</div>

例：数値と単位（px）を分けて管理する場合

<div v-bind:style="{ fontSize: size + 'px' }">
  テキストの例
</div>

例：ケバブケース（kebab-case）による記述
CSS 構文のようにハイフンを用いたプロパティ名も使用可能ですが、あまり推奨されません。

<div v-bind:style="{ 'font-size': size + 'px' }">
  テキストの例
</div>

例：HSLカラーを使用した背景色の動的変更

Vue インスタンス内の bgVal データプロパティの値に応じて背景色が変わります。

<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
  この div タグの背景色に注目してください。
</div>

例：三項演算子（Ternary Expression）による条件付きスタイルi

sImportant プロパティが true か false かによって背景色を切り替えます。

<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
  条件付きの背景色
</div>

v-bind を使用して class 属性を変更することも可能です。
v-bind:class の値には、変数を使用できます。

例：クラス名を className データプロパティから取得する場合

<div v-bind:class="className">
  Vue によってクラスが設定されています
</div>

また、v-bind:class の値をオブジェクトにして、特定のクラスを適用するかどうかを true/false で制御することもできます。

例：myClass を条件付きで割り当てる場合

<div v-bind:class="{ myClass: true }">
  背景色を変えるためのクラスが条件付きで設定されています
</div>

例：Vue のプロパティ値に基づいてクラスを割り当てる場合

isImportant プロパティが true の場合にのみ myClass が適用されます。

<div v-bind:class="{ myClass: isImportant }">
  プロパティの状態に応じてクラスが切り替わります
</div>

v-bind: の省略記法は、単に : を使用することです。実際の開発現場ではこちらの記法が一般的です。

例：v-bind: の代わりに : を使用

<div :class="{ impClass: isImportant }">
  省略記法を使用したクラス設定
</div>