Vue.jsの「v-bind class」ディレクティブの使用方法

1. 単一のクラスのバインド: 以下の例では、データプロパティ「isActive」の値に応じて、要素に「active」クラスをバインドします。

<div v-bind:class="{ 'active': isActive }"></div>

2. 複数のクラスのバインド: 複数のクラスをバインドする場合は、オブジェクトの形式でクラスとその条件を指定します。

<div v-bind:class="{ 'active': isActive, 'highlight': isHighlighted }"></div>

3. クラスの動的な追加と削除: データプロパティの値を変更することで、クラスの追加と削除を制御することができます。

<div v-bind:class="{ 'active': isActive, 'highlight': isHighlighted }"></div>
<button @click="isActive = !isActive">Toggle Active</button>
<button @click="isHighlighted = !isHighlighted">Toggle Highlight</button>

4. クラスの条件付き追加: 条件に基づいてクラスを追加する場合は、三項演算子を使用します。

<div v-bind:class="[isActive ? 'active' : '', isHighlighted ? 'highlight' : '']"></div>

上記のように、「v-bind class」ディレクティブを使用することで、動的なクラスのバインディングを簡単に行うことができます。これにより、要素のスタイリングや状態の管理が柔軟になります。