Vue は :class と :style に特別なオブジェクトおよび配列構文を提供しており、リアクティブ状態に基づいて条件付きでクラスとインラインスタイルを適用できます。これは手動でクラス文字列を構築するより清潔です。
<script setup>
import { ref } from "vue";
const isActive = ref(true);
const hasError = ref(false);
</script>
<template>
<!-- a class is applied when its value is truthy -->
<div :class="{ active: isActive, 'text-red': hasError }">...</div>
<!-- renders class="active" (active=true, text-red=false) -->
</template>
各キーはクラス名で、各値はブール条件です。値が真の場合のみクラスが表示されます。これは状態駆動スタイリング（アクティブなタブ、エラー状態など）の最も一般的なパターンです。
<template>
<div :class="[baseClass, isActive ? 'active' : '', { disabled: isDisabled }]">...</div>
<!-- mix static classes, ternaries, and objects -->
</template>
<div class="card" :class="{ featured: isFeatured }">...</div>
<!-- result: class="card featured" — static and dynamic combine automatically -->
class と :class を一緒に使用できます。Vue がマージします。
<script setup>
const color = ref("blue");
const size = ref(16);
</script>
<template>
<!-- camelCase or 'kebab-case' property names -->
<div :style="{ color: color, fontSize: size + 'px' }">...</div>
<div :style="[baseStyles, overrideStyles]">...</div> <!-- merge style objects -->
</template>
<MyComponent :class="{ active: isActive }" />
<!-- the class falls through to the component's root element -->
動的クラス/スタイルバインディングは Vue の日常的な作業です。アクティブなナビゲーション項目のハイライト、検証エラーの表示、テーマの適用などに使います。
オブジェクト構文（{ className: condition }）は条件付きスタイリングを宣言的で読みやすくしており、エラーが起きやすい手動文字列連結を避けられます。
:class が静的な class とマージされることと、ソースを組み合わせるための配列形式を理解することで、実質的にすべての条件付きスタイリングのニーズに清潔に対応できます。