0Pricing
Vue Academy · レッスン

v-bindの動的バインディングと複数バインディング

動的な属性名:[dynamicAttr]、v-bindのオブジェクト構文、複数の属性を一度にバインドする方法について学習します。

「v-bindの動的バインディングと複数バインディング」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

属性を動的にバインドする

v-bind ディレクティブ（短縮記法は :）は、HTML 属性をリアクティブな値に接続します。動的なクラスやスタイル、さらには動的に名前を付けた属性にも利用できます。

基本的な v-bind

任意の属性を式にバインドできます。値が変わると、Vue が属性を更新します。

<img :src="imageUrl" :alt="description" />

クラスバインディング：オブジェクト構文

クラスでは、オブジェクト構文を使って、真と評価される値に基づきクラスを切り替えます。キーがクラス名を表し、値によって適用するかどうかが決まります。

<div :class="{ active: isActive, disabled: isDisabled }"></div>

クラスバインディング：配列構文

配列構文では、クラスの一覧を適用します。静的な文字列とリアクティブな変数を組み合わせたり、条件付きの項目としてオブジェクトを入れ子にしたりできます。

<div :class="[baseClass, isActive ? activeClass : '']"></div>

配列とオブジェクトを組み合わせる

配列の中にオブジェクト形式を入れ子にすることで、常に適用するクラスと条件付きのクラスの両方を利用できます。

<div :class="[baseClass, { active: isActive }]"></div>

スタイルバインディング：オブジェクト構文

オブジェクトを使ってインラインスタイルをバインドします。プロパティ名にはキャメルケースを使用します（または、引用符で囲んで kebab-case を使用します）。値はリアクティブにできます。

<div :style="{ color: textColor, fontSize: size + 'px' }"></div>

スタイルバインディング：オブジェクトの配列

スタイルオブジェクトの配列を渡すと、基本スタイルとテーマによる上書きなど、複数のスタイルソースをマージできます。

<div :style="[baseStyles, overrideStyles]"></div>

複数の属性を一度にバインドする

引数なしの v-bind は、属性のオブジェクト全体を要素に展開します。各キーが属性になります。

<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>

<template>
  <div v-bind="attrs"></div>
</template>

属性名を動的に指定する

角括弧を使うと、実行時に属性名自体を計算できます。角括弧内の式が評価され、その結果が属性のキーとして使用されます。

<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>

<template>
  <div :[attrName]="attrValue"></div>
</template>

それぞれを使う場面

  • オブジェクト形式のクラス構文 — 条件に応じて複数のクラスを切り替える場合。
  • 配列形式のクラス構文 — 基本クラスと条件付きクラスを組み合わせる場合。
  • v-bind="obj" — 属性一式を転送する場合。
  • 動的な名前 :[name] — 属性のキーを実行時に決める場合。

組み合わせた例

この要素では、動的なクラス、動的なスタイル、属性の展開を組み合わせて使用しています。すべてリアクティブです。

<div
  :class="[base, { active: isActive }]"
  :style="{ color: textColor }"
  v-bind="extraAttrs"
></div>

理解度チェック

v-bind の知識を確認します。

まとめ

v-bind の幅広い使い方を学びました。

  • オブジェクト形式のクラス構文は条件に応じてクラスを切り替え、配列構文はクラスを組み合わせます。
  • スタイルバインディングでは、オブジェクト（キャメルケース）またはオブジェクトの配列を使用します。
  • v-bind="obj" はオブジェクトのすべての属性を展開します。
  • :[name]="val" は動的な名前の属性をバインドします。

よくある質問

「v-bindの動的バインディングと複数バインディング」レッスンは無料ですか？

はい。「v-bindの動的バインディングと複数バインディング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「v-bindの動的バインディングと複数バインディング」で何を学びますか？

動的な属性名:[dynamicAttr]、v-bindのオブジェクト構文、複数の属性を一度にバインドする方法について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「v-bindの動的バインディングと複数バインディング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. v-model：双方向バインディングの内部動作
  2. v-onイベント修飾子
  3. v-bindの動的バインディングと複数バインディング
  4. カスタムディレクティブの作成
← Vue Academyに戻る