VueJs 绑定 HTML Class 绑定返回对象的计算属性

绑定 HTML Class 我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div id="app" v-bind:class="classObject"></div>
<script type="text/javascript">
    var vm3 = new Vue({
        el: "#app",
        data: {
            isActive: true,
            error: true
        },
        computed: {
            classObject: function () {
                return {
                    active: this.isActive && this.error,
                    'text-danger': this.error
                }
            }
        }
    })
</script>

渲染的html结构如下：

<div id="app" class="active text-danger"></div>