Vue3的class或style绑定 - 05

 Vue3中对标签进行动态或附加逻辑性质的 样式赋予操作，可以进行下面几种

1. 单class添加的普通模式

 <div :class="{a:hasColor}">此处的颜色 需要style样式里面根据判断进行切换</div>

const hasColor =ref(true)

    .a {
        color: red;
    }

对div进行赋予名为a的class名字的时候，进行逻辑判断

:class="{a:hasColor}" 若hasColor为true，则允许添加class名

同样，此处的阀门判断值也可以为字符串形式

<div :class="hasFont">我这里的字体大小不一样</div>

const hasFont =ref('font')

2. 多class名同时添加的合并模式

<div :class="[hasFont,{a:hasColor}]">我同时会变色，且会字体变大，class语法合并，用数组[]给一起装起来</div>

:class="[hasFont,{a:hasColor}]" 以数组的形式进行合并，同时进行判断

3. 非class，直接style样式添加模式

<div :style="{'fontSize':hasStyle}">不用class，直接用style行内添加样式</div>

    const hasStyle = ref('30px')

行内样式的添加（可使用驼峰命名法）