Vue でクラスとスタイルを使用して v-bind バインディングを使用するいくつかの方法

<div id="アプリ">
    <div class="ボタングループ">
      <ボタン
        v-for="(タブ、インデックス) タブ内" 
        v-bind:key="インデックス" 
        v-bind:class="{active: currentTab === tab}" 
        v-on:click="currentTab = タブ"
      >{{タブ}}</ボタン>
    </div>
    <コンポーネント v-bind:is="currentTabComponent"></コンポーネント>
</div>
<スクリプト>
Vue.component("タブ1", {
    "template": "<p>これはタブ 1 です</p>"
});
Vue.component("tab2", {
  "template": "<p>これはタブ 2 です</p>"
});
Vue.component("tab3", {
  "template": "<p>これはタブ 3 です</p>"
});
var vm = 新しい Vue({
  el: "#app",
  データ： {
    現在のタブ: "タブ1",
    タブ: ["tab1", "tab2", "tab3"]
  },
  計算: {
    現在のタブコンポーネント() {
      this.currentTab を返します。
    }
  }
});
</スクリプト>

<ボタン 
    クラス="btn"
    v-bind:class="{'btn-primary': isPrimary、アクティブ: isActive}"
</ボタン>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        isPrimary: true、
        アクティブ: true  
      }
    });
</スクリプト>

<button class="btn btn-primary アクティブ"></button>

<button class="btn" v-bind:class="activePrimary"></button>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        アクティブプライマリ: {
          'btn-primary': true、 
          アクティブ: 真
        }
      }
    });
</スクリプト>

<button class="btn btn-primary アクティブ"></button>

<button v-bind:class="activeClass"></button>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        アクティブ: true
      },
      計算: {
        アクティブクラス() {
          戻る {
            アクティブ: this.isActive
          }
        }
      }
    });
</スクリプト>

<button class="btn" v-bind:class="[primary, active]"></button>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        プライマリ: 'btn-primary',
        アクティブ: 'btn-active'  
      }
    });
</スクリプト>

//三項式 <button v-bind:class="[isActive ? active : '', primary]"></button>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        isActive: 真、
        プライマリ: 'btn-primary',
        アクティブ: 'btn-active'  
      }
    });
</スクリプト>
 
//配列内でオブジェクト構文を使用する <button v-bind:class="[{active: isActive}, primary]"></button>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        isActive: 真、
        プライマリ: 'btn-primary'
      }
    });
</スクリプト>

<div v-bind:style="{color: colorStyle, backgroundColor: background}">
オブジェクト構文
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        カラースタイル: '赤'、
        背景: '青'
      }
    });
</スクリプト>

<div v-bind:style="style">オブジェクト構文</div>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        スタイル: {
          色: '赤'、
          背景色: '青'
        }
      }
    });
</スクリプト>

<div v-bind:style="[style, fontStyle]">オブジェクト構文</div>
<スクリプト>
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        スタイル: {
          色: '赤'、
          背景色: '青'
        },
        フォントスタイル: {
          フォントサイズ: '18px'
        }
      }
    });
</スクリプト>