看下面一段代码学习此部分内容
<template>
<button @click="stateChang">状态切换</button>
<div :class="{'font-color':classObject.openColor,'font-weight':classObject.openWeight}">颜色和粗细变化</div>
<div :class="classObject2">颜色和粗细变化2</div>
<div :class="classObject3">计算属性：字体变大</div>
<div :class="[classObject2,classObject3]">数组方式绑定多个属性</div>
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">对于不同的浏览器可能不支持某种属性，他会选择当前浏览器支持的最后一个值</div>
</template>
<script lang="ts" setup>
import { computed, nextTick } from 'vue'
import { ref } from 'vue'
import { reactive } from 'vue'
const classObject = reactive({
openColor: false,
openWeight:false
})
const classObject2 = reactive({
'font-color': false,
'font-weight':false
})
const classObject3 = computed(()=>{
return classObject.openColor && classObject.openWeight ? "font-size" : ""
})
function stateChang(){
classObject.openColor = true
classObject.openWeight = true
classObject2['font-color'] = true
classObject2['font-weight'] = true
}
</script>
<style scoped>
.font-color{
color: red;
}
.font-weight{
font-weight: 400;
}
.font-size{
font-size: 200%;
}
</style>运行完毕之后
Class绑定
在vue中，你可以将单纯的控制是否添加
<div :class="{'font-color':classObject.openColor,'font-weight':classObject.openWeight}">颜色和粗细变化</div>
const classObject = reactive({
openColor: false,
openWeight:false
})调整false便可以控制其是否添加显示，不过这么写显的很乱，所以聪明的人又发明了一种写法，
<div :class="classObject2">颜色和粗细变化2</div>
const classObject2 = reactive({
'font-color': false,
'font-weight':false
})将Class名称直接作为JSON中的name，Value作为控制，也可以简单的实现显示或者不显示。
Vue的双向绑定的优势在于你可以在方法或者计算属性中去随意改变他的值，所以你在计算属性，或者方法，或者直接在html中引号里面写三元表达式
<div :class="classObject3">计算属性：字体变大</div>
const classObject3 = computed(()=>{
return classObject.openColor && classObject.openWeight ? "font-size" : ""
})
如上面代码，我如果想两个属性合体，一起表达咋整啊？数组可以帮助你！
<div :class="[classObject2,classObject3]">数组方式绑定多个属性</div>Style绑定
和Class基本一致，不做过多介绍了，上面的class换成style差不多，唯一介绍一个我们可能八辈子都用不到的属性前缀
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">对于不同的浏览器可能不支持某种属性，他会选择当前浏览器支持的最后一个值</div>
这些属性干啥的，例如有的浏览器支持display-webkit-box但是不支持后面两个属性，那么他就只会显示-webkit-box这个属性，然后有些三个都支持，那他会选择最后一个来展示display-flex
关注公众号：资小库，问题快速答疑解惑
