式の結果のタイプは、文字列、オブジェクト、配列です。

1. オブジェクトの構文:

1. 新しい HTML ファイルを作成し、基本構造を生成した後、vue の cdn をインポートします

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2. 本体に app という ID を持つ div タグを記述し、active という名前のスタイルでバインドします。isActive を true または false に設定して、アクティブなスタイルを有効にするかどうかを制御します。

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

3. head 終了タグの前に style タグを追加し、次のコードを追加します

  <style>
    .active{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>

4. div の下に script タグを追加して Vue インスタンスを作成します

  <script>
    new Vue({
      el:'#app',
      data:{
          isActive:true
        }
    })
  </script>

このとき、 isActive が true の場合、アクティブなスタイルが有効になり、幅と高さ 200、背景色が赤の正方形がページに表示されます。(この時divブロックを選択しているため青いマスクが付きます)

isActive の値が false に変更されると、ページにはスタイルが表示されなくなります。

5. 複数のクラスを動的に切り替えるために、オブジェクト内でさらに多くのフィールドを渡すことができます。

  <div id="app" v-bind:class="{ active: isActive, 'border-radius': circle }"></div>

クラス名 border-radius の CSS スタイルは次のとおりです。

    .border-radius{
      border-radius: 50%;
    }

この時点で、データの値を true に設定すると、両方のスタイルが機能します。

      data:{
          isActive:true,
          circle:true
        }

したがって、直径 200 の赤い円がページ内に生成されます。クラス名 active と border-radius は両方とも div にあります

isActive または Circle が変更されると、それに応じてクラスリストが更新されます。

6. v-bind:class ディレクティブは、通常のクラスと共存することもできます。例えば：

<div id="app" class="text-size" v-bind:class="{ active: isActive, 'border-radius': circle }"></div>

最後のページで有効になるクラスが 3 つあります。

2. 配列の構文

<div id="app" v-bind:class="[activeClass,borderClass]"></div>

      data: {
        activeClass: 'active',
        borderClass: 'border-radius'
      }

次のようにレンダリングされます:

三項式も使用できます

  <div id="app" v-bind:class="[activeClass,isBorder?borderClass:'']"></div>

このとき、isBorder の値が false の場合、ページ内では activeClass スタイルのみが有効になります。

ただし、条件クラスが複数ある場合は煩雑になる可能性があるため、オブジェクト構文を配列構文で使用することもできます。

<div id="app" v-bind:class="[activeClass,{borderClass:isBorder}]"></div>