0Pricing
Vue Academy · レッスン

属性とクラスのバインディング

属性、クラス、スタイルを動的にバインドします

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

クラスとスタイルのバインディング

状態に応じて要素のクラスやスタイルを変更することは、よくある要件です。

Vueでは:classと:styleに特別な処理が用意されているため、文字列だけでなくオブジェクトや配列も渡せます。

:classのオブジェクト構文

:classにオブジェクトを渡します。キーがクラス名を表し、真と評価される値に対応するクラスが適用されます。

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

<!-- if isActive is true, the "active"
     class is applied -->

静的クラスと動的クラスの組み合わせ

静的なclass属性と動的な:classは、組み合わせて適用されます。

<div class="card" :class="{ highlighted: isSelected }">
  Always has "card";
  adds "highlighted" when selected.
</div>

:classの配列構文

配列を渡すと、複数のクラスを適用できます。

<div :class="[baseClass, themeClass]">Box</div>

<!-- data:
     baseClass = "panel"
     themeClass = "dark" -->

配列内の条件分岐

配列内で条件式を組み合わせて使用できます。

<div :class="[isActive ? 'active' : '', errorClass]">
  ...
</div>

<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
  ...
</div>

インラインスタイルのバインディング

:styleディレクティブは、オブジェクトを使ってインラインスタイルをバインドします。

fontSizeのように、プロパティ名にはcamelCaseを使用します。

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

<!-- data: textColor = "red", size = 18 -->

:styleと配列

スタイルオブジェクトの配列を渡すと、Vueがそれらをマージします。

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

自動プレフィックス付与

CSSプロパティにベンダープレフィックスが必要な場合、Vueはブラウザーがサポートしていれば自動的に追加できます。

  • 標準のプロパティを記述します
  • 必要に応じてVueが適切なプレフィックスを適用します

これにより、スタイルのバインディングを簡潔に保てます。

動的な属性バインディング

任意の属性を:attrで動的にバインドできます。

<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>

ブール属性

disabledのようなブール属性は、値がtruthyの場合にのみVueが属性を含めます。

<button :disabled="isSubmitting">Submit</button>

<!-- if isSubmitting is false,
     the disabled attribute is removed -->

条件付きで複数のクラスをバインドする

複数のクラスを一度に切り替える実用的な例です。

<li
  class="todo"
  :class="{
    done: task.completed,
    overdue: task.isLate,
    priority: task.urgent
  }"
>
  {{ task.title }}
</li>

理解度チェック

クラスとスタイルのバインディングについての理解度を確認しましょう。

まとめ: 属性とクラスのバインディング

動的なバインディングについて学びました。

  • :classのオブジェクト構文では、truthyかどうかでクラスを切り替えます
  • :classの配列構文では、リストを適用します
  • :styleでは、camelCaseのキーを使ってインラインスタイルをバインドします
  • 任意の属性を:attrでバインドできます
  • ブール属性はtruthyの場合にのみ表示されます

次は、コンポーネントの基本と通信について学びます。

よくある質問

「属性とクラスのバインディング」レッスンは無料ですか？

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

「属性とクラスのバインディング」で何を学びますか？

属性、クラス、スタイルを動的にバインドします ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「属性とクラスのバインディング」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Interpolationとディレクティブ
  2. 条件分岐とループ
  3. 属性とクラスのバインディング
← Vue Academyに戻る