yamotech

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">配列構文</div>
</div>

yamotech

<div id="app">
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">オブジェクト構文</div>
  <div v-bind:style="styleObject">直接 style オブジェクトに束縛する</div>
</div>

yamotech

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

yamotech

<div id="app">
  <div v-bind:class="[isActive ? activeClass : '', errorClass]">三項演算子</div>
  <div v-bind:class="[{ active: isActive }, errorClass]">オブジェクト構文</div>
</div>

yamotech

<div id="app">
  <div v-bind:class="[activeClass, errorClass]">配列構文</div>
</div>

yamotech

<div id="app">
  <div v-bind:class="classObject">算出プロパティに束縛</div>
</div>

yamotech

<div id="app">
  <div v-bind:class="classObject">オブジェクト構文</div>
</div>

yamotech

<div id="app">
  <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">クラスのバインディング</div>
</div>

yamotech

<div id="app">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

yamotech

<div id="app">
  {{ fullName }}
</div>