可以传字符串、数组、对象

绑定class

1、对象

1.1 直接绑定一个对象，通过isActive的值判断是否生效

<div v-bind:class="{ active1: isActive1,active2: isActive2 }"></div>

1.2 绑定一个返回对象的计算属性

<div v-bind:class="classObject"></div>

......

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

2、数组

2.1 直接绑定一个数组

<div v-bind:class="[activeClass（需要data中定义）, 'errorClass'（直接生效）]"></div>

......

data: { 
    activeClass: 'active',
}

2.2 三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

2.3 数组中使用对象

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定style

1、对象

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

......

data: { 
    activeColor: 'red', 
    fontSize: 30 
}

直接绑定到一个样式对象，让模板更清晰

<div v-bind:style="styleObject"></div>

......

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

也可结合计算属性使用

2、数组

<div v-bind:style="[baseStyles, overridingStyles]"></div>