Vue的Class与Style绑定的方法

<style>
  .exp{
    border: 1px solid #ccc;
  }
  .forExp{
    background: blue;
  }
</style>
<div class="exp" v-bind:class="{newExp:isNewExp}"></div>
<script>
  var exp=new Vue({
    el:".exp".
    data:{
      isForExp:false
    }
  })
</script>

<div class="exp" v-bind:class="{newExp:isExp,npc:isNpc}"></div>
<script>
  data:{
    isExp:false,
    isNpc:true
  }
</script>

<div class="exp isNpc"></div>

<div class="exp" v-bind:class="obj"></div>
<script>
  data:{
    obj:{
      newExp:false,
      npc:true
    }
  }
</script>

<div class="exp" v-bind:class="[newExp,oldExp]"></div>
<script>
  data:{
    newExp:"new",
    oldExp:"old"
  }
</script>

<div class="exp new old"></div>

<div class="exp" v-bind:class="[act? newExp:oldExp]"></div>
<script>
  data{
    newExp:"new",
    oldExp:"old",
    act:true
  }
<script>

Vue.component("my", {
  template: '<p class="foo bar">Hi</p>'
})

<my class="tip"></my>

<p class="foo bar tip">Hi</p>

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

<p class="foo bar active">Hi</p>

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
  data:{
    activeColor:"blue",
    fontSize:20
  }
</script>

<div v-bind:style="obj"></div>
<script>
  data:{
    obj:{
      color:"#FFF",
      fontSize:"20px"
    }
  }
</script>

<div v-bind:style="[style1,style2]"></div>
<script>
  data:{
    style1:{
      color:"#666"
    },
    style2:{
      background:"#b1b1b1"
    }
  }
</script>

Chrome 和 Safari : -webkit-
IE :        -ms-
Firfox :      -moz-
Opera :      -o-