5、 Vue3 Class样式绑定

案例

<!--
 Class样式绑定
-->
<template>
  <div :class="{'class1': class1}">class1</div> <br>
  <div :class="class2">class2</div>
  <button @click="changeStyle">点击改变样式</button><br>
</template>

<script>
import { reactive, ref } from '@vue/reactivity';

export default {
    setup(){
        let class1 = ref(true);
        let class2 = reactive({
            class1: true,
            class2: true
        })
        let changeStyle = ()=>{
           class1.value = !class1.value
        }
        return {
            class2,
            class1,
            changeStyle
        } 
    }
}
</script>
<style>
.class1 {
  border: 1px solid red;
}
.class2 {
    font-size: 20px;
    color: red;
}
</style>