v-bind (:) 属性の動的バインディング

最終更新：2026-10-22

v-bind は式の結果を HTML 属性にバインドします。省略記法はコロンです。class と style はオブジェクト構文と配列構文もサポートします。

📝 構文

<a v-bind:href="url">リンク</a>
<img :src="imgSrc" :alt="altText">
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>

expression	属性名 + 式。class/style はオブジェクト/配列を受け付け、:[動的属性名] もサポートします

戻り値：ディレクティブ。戻り値なし

以下のコードを編集して結果を確認しましょう：

出力：

The anchor points to the tutorial site; 'Status text' carries the hot class.

💡 ヒント : は v-bind: の省略記法です。ブール属性（disabled/checked）は false にバインドすると、Vue が自動的に属性を取り除きます。

ℹ️ 補足 class と style の拡張構文：オブジェクト形式はブール値で切り替え、配列形式は複数のソースを結合します。

💡 ヒント v-bind="obj" はオブジェクトの全属性を一度に展開できます（v-bind="$attrs" のような一括透過に便利）。

Q 多くの属性を一度にバインドするには？

A v-bind="obj" でオブジェクトの全キーを展開できます。コンポーネントの透過では v-bind="$attrs" がよく使われます。

Q class バインディングでオブジェクトが使えるのはなぜですか？

A Vue は class/style に拡張を施しています。オブジェクト形式 { クラス名: 真偽値 } は条件に応じて連結され、配列形式は複数のソースを結合します。

Q ブール属性はどう制御しますか？

A false または null をバインドすると Vue が自動的に属性を取り除き、true なら追加されます。disabled="" を手書きする必要はありません。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。