vue3 class与style的绑定

calss
使用v-bind:calss进行元素类的绑定，简写为:calss，其中类的绑定方式有两种：
第一 以对象的形式进行绑定
第二 以数组的形式进行绑定

<template>
    <div :class="{active:isActive}">对象形式绑定class</div>
    <div :class="[error]">数组形式绑定class</div>
</template>
<script>
export default {
    setup() {
        const isActive=true
        const error="errorClass"
        return{
            isActive,
            error
        }
    },
}
</script>

当然这两种方式也可以混合使用
style
使用v-bind:calss进行元素类的绑定，简写为:style，其中类的绑定方式有两种：
第一 以对象的形式进行绑定
第二 以数组的形式进行绑定

<div :style="{color:isColor}">对象形式绑定style</div>
    <div :style="[fontSize]">数组形式绑定style</div>
    const isColor='red'
        const fontSize={
            size:'30px',
            color:'yellow'
        }

总结：

1. calss和style都支持对象和数组的语法绑定，不同的是calss的数组绑定的data中数据赋值的是字符串，style数组绑定data中赋值的是个对象，对象里面写css样式，对象绑定的时候，基本上就是JSON那种格式
2. class 可以给组件传递，也可以给组件内部的DOM元素传递，在组件内部的DOM元素上使用 :class="$attrs.class"来接收

仅记录平常学习