一、动态绑定Class类样式
我们现在有两个Class类，一个是box，一个是active，我们想要在特定情况下去显示active。
如果我们把两个类都写在一个class中，后一个类会覆盖前一个类：
我们给class前面加上v-bind（简写：）就可以实现根据响应式值改变样式：
如果我们通过一个定时器不断改变isActive的值，我们会发现样式在不断改变：
<template><view class="box" :class="{active:isActive}">Class样式绑定</view>
</template><script setup>import {ref} from "vue";let isActive = ref(false);setInterval(()=>{isActive.value = !isActive.value;},1000);
</script><style lang="scss">
.box{width: 200px;height: 200px;background-color: lightblue;
}
.active{background-color: blue;color: #fff;
}
</style>但是我们更多的是去使用三元表达式的写法：
二、动态绑定style内联样式
我们固定的内联样式写法如下：
我们将字体值改为响应式，就需要做如下调整：
有几个值得注意的点：
①属性值除了响应式变量外，其他均需使用单引号进行包裹。
②每一个属性用逗号隔开，不再使用分号。
③遇到带连字符的属性时，使用驼峰命名法，即font-size改为fontSize。
