你我学习网
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
1 2 | <div v-bind:class="{ active: isActive }"></div> |
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：
1 2 3 4 5 | <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> |
和如下 data：
1 2 3 4 | data: { isActive: true, hasError: false} |
结果渲染为：
1 2 | <div class="static active"></div> |
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里：
1 2 | <div v-bind:class="classObject"></div> |
1 2 3 4 5 6 | data: { classObject: { active: true, 'text-danger': false }} |
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
1 2 | <div v-bind:class="classObject"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 | data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } }} |