vue class v-bind:class数组用法

<template>
    <view>
        <!-- class -->
        <view class="static" :class="[activeClass,errorClass]">111</view>
        <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
        <view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
        <!-- style -->
        <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                isActive: true,
                activeClass: 'active',
                errorClass: 'text-danger',
                activeColor:"green",
                fontSize:50
            }
        }
    }
</script>
<style>
    .static{
        font-size:30rpx;
    }
    .active{
        background-color: #007AFF;
    }
    .text-danger{
        font-size:60rpx;
        color:#DD524D;
    }
</style>