《Vue2.0 花式绑定class或者style》

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

```<template>
  <div>
    <!-- class和style的花式绑定 -->

    <ul>
      <li :class="{ one : done }">人之生也直，罔之生也幸而免。</li>

      <li :class="{ one : done , 'two' : isActive}">文质彬彬，然后君子。</li>

      <li :class="{ one : !done ? 'true' : 'false' }">以直报怨，以德报德。</li>   
    </ul>

    <ul>
      <li :class="[taxon1,taxon2]">温故而知新。</li>

      
      <li :class="[ done ? taxon1 : '' ]">与其进也，不与其退也，唯何甚，人洁己以进，与其洁也，不保其往也。</li>
      
      
      <li :class="[{ four : isActive },taxon1]">自古皆有死，民无信不立。</li>
    </ul>
    
  </div>
</template>

<script>
export default {
  data(){
    return {
      done : false,
      isActive : true,
      taxon1 : 'three',
      taxon2 : 'four'
    }
  }
}
</script>

<style>
.one{
  background-color: blue;
}
.two{
  color : red
}
.three{
  background-color: aqua;
}
.four{
  color : green
}
</style>