vue2.0 Class与Style绑定

对象语法

• 给:class绑定对象，对象可以有多个键值对。

  <div :class="{ active: isActive}"></div>

• :class可以和普通class并存。

  <div class="static" :class="{ active: isActive}"></div>

• 绑定数据中的一个对象。

  <div :class="classObject"></div>

  data: {
    classObject: {
      active: true
    }
}

• 计算属性

  <div :class="classObject"></div>

 data: {
   isActive: true
 },
computed: {
  classObject: function () {
    return {
      active: this.isActive
    }
  }
}

数组语法

• 绑定数组

  <div :class="['active', 'error']"></div>

• 三元表达式

  <div :class="[isActive ? 'active' : '']"></div>

• 对象数组

  <div :class="[{isActive: 'active'}, 'error']"></div>

组件

active将被添加到组件的根元素上。

  <my-component class="active"></my-component>

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

绑定内联样式

css属性名可以用驼峰式(camelCase) 或 (配合引号的)短横分隔命名(kebab-case)