v-bind:class 的写法 对象写法 和 数组写法

<template>
    <div class="about">

        <p :class="{classA:isTrue,classB:!isFalse}">classA -- classB</p>
        <h1 :class="hasChange">This is an about page</h1>
        //绑定一个 返回对象 的计算属性

        <h1 :class="[{classA:isTrue},hasChange]">This is an about page</h1>
        //绑定多个类名 数组写法 嵌套 对象
        
        <div :class="[classA,classB]"></div>
        <div :class="[isActive ? classC : '', classE]"></div>
        
        //只能是  数组写法 嵌套 对象
        <div :class="[{classA:isTrue}, classB]"></div>


    </div>
</template>
<script>
    export default {
        name: 'About',
        data() {
            return {
                isTrue: 1,
                isFalse: 0,
                list: [{
                        title: 'aaa'
                    },
                    {
                        title: 'sss'
                    }
                ]
            }
        },
        computed: {
            hasChange() {
                return {
                    activeBtn: this.isTrue && !this.isFalse,
                    classB: this.list.length > 1
                }
            }
        }
    }
</script>
<style>
    .classA {
        font-size: 130px;
    }

    .classB {
        color: #00557f;
    }

    .activeBtn {
        border: 1px solid #fcc;
    }
</style>