この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: v-bindによるデータ連携
SEOタイトル: Vue.js v-bind 完全ガイド (属性 / クラス / スタイル / Composition API)

この記事の要点
  • v-bind:href="url" = HTML 属性に JS の値をバインド。短縮形は :href="url"
  • クラスの動的切替: :class="{ active: isActive }" (オブジェクト) / :class="[cls1, cls2]" (配列)
  • スタイルの動的切替: :style="{ color: textColor, fontSize: size + "px" }"
  • v-bind="objWithMultipleProps" でオブジェクト全プロパティを一括バインド
  • Composition API では ref / computed の値が : 経由で自動 unwrap

v-bind の基本

v-bind は HTML 属性の値を JavaScript 式で動的に決定するための Vue ディレクティブです。短縮形 : が広く使われます。

クラスバインディング

スタイルバインディング

オブジェクトを一括バインド

v-bind の修飾子

修飾子意味例
.prop属性ではなく DOM プロパティとしてバインド:innerHtml.prop="html"
.attr明示的に HTML 属性として (Vue 3):value.attr="val"
.camelケバブケース属性名をキャメルに:view-box.camel="box"
.sync (Vue 2)双方向バインド (v-model:propName で代替)非推奨

Composition API での ref / computed 連携

typical use cases

シーンv-bind の使い方
ボタンの活性状態:disabled="loading"
選択中タブのハイライト:class="{ active: tab === current }"
動的画像:src="userAvatar"
テーマカラー:style="{ '--brand': brandColor }"
進捗バー:style="{ width: percent + '%' }"
属性ホワイトリスト一括v-bind="$attrs" (透過)
外部リンク区別:target="isExternal ? '_blank' : null"

v-bind と v-on (双方向: v-model)

よくあるミス

ミス正解
:href="{{ url }}":href="url" (二重カッコ不要)
href="{{ url }}":href="url" (Mustache は属性に使えない)
:class="active" (文字列のつもり):class="'active'" または class="active"
:style="color: red":style="{ color: 'red' }"
true/false なのに残るBoolean 属性に v-bind を使う

FAQ

Q: v-bind と {{ }} の違いは？
A: {{ }} (Mustache) はテキストコンテンツ専用。属性値には使えないので v-bind (短縮 :) を使います。

Q: クラスを class と :class 両方書ける？
A: 可能。Vue は両者をマージします。

は OK。

Q: v-bind="$attrs" って何？
A: 親から渡されたが props として宣言していない属性すべてを子要素にパススルー。ラッパーコンポーネントで定番。