SOURCE

new Vue({
    el: "#app",
    data: {
        singleClass: {active:true},
        multiClass: {
            'font-color': true,
            bg: true,
        }
    },
    computed: {
        fontColorByCompute() {
            return {
                active: 12 < 10 ? true : false,
            }
        }
    }
})

<div id="app">
   <!-- 表达式形式，可以是data中的数据，也可以是计算属性中的数据 -->
    <p :class="singleClass">Add class with value</p>
    <p :class="singleClassByCompute">Add class with computed</p>

    <!-- 对象形式，value为真值，则key作为类生效。value也可以是表达式计算的返回值 -->
    <p :class="{active:true}">Add class with object</p>
    <p :class="{active: 12 < 10 ? true : false}">Add class with object base on condition</p>

    <!-- 数组形式，类名为数据项，也可以表达式-->
    <p :class="['active']">Add class with array</p>
    <p :class="[12 > 10 ? 'active' : '']">Add class with array base on condition</p>

    <!-- 也可以绑定多个动态类 -->
    <p :class="multiClass">Add class with multiple value</p>
    <p :class="{'font-color': true, bg:true}">Add class with multiple value</p>
    <p :class="{'font-color': 12 < 10, bg:true}">Add class with multiple value</p>
    <p :class="[singleClass, multiClass]">Add class with multiple value</p>
    <p :class="[12 > 10 ? 'singleClass':'', multiClass]">Add class with multiple value</p>

    <!-- 动态类与固定类混用，对象和数组形式混用 -->
     <p :class="[{singleClass:true}, multiClass]">Add class with multiple value</p>
     <p class="always" :class="singleClass">Add class with multiple value</p>
    <p :class="[singleClass, 'always']">Add class with multiple value</p>
</div>

.active {
    color: red;
}
.bg {
    background-color: orange;
}
.font-color {
    color: #fff;
}
.always {
    background-color: blue;
}