<template>
    <fieldset>
        <legend>class绑定应用场景-变量、对象和数组</legend>
        <p v-bind:class="myClass">普通变量：Vue.js是渐进式前端框架。</p>
        <button type="button" @click="myClass = 'class1'">修改样式</button>
        <p :class="classObject">对象：Vue单页应用开发简单。</p>
        <div v-bind:class="{ active: isActive }">
            对象：是一种常用的数据类型。
        </div>
        <div v-bind:class="[classA, classB]">
            数组：在工程项目中使用非常广泛。
        </div>
        <div class="static" v-bind:class="{ active: isActive, redText: hasError }">
            v-bind:class指令与普通的class属性共存。
        </div>
    </fieldset>
    <fieldset>
        <legend>style绑定应用场景-对象和数组</legend>
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
            绑定style
        </div>
        <div :style="styleObject">style对象</div>
        <div v-bind:style="[styleObjectA, styleObjectB]">style数组</div>
    </fieldset>
</template>
<script setup lang='ts'>
import { reactive, ref } from 'vue';
const myClass = ref("red")
const classObject = ref({
    class1: true,
    class2: true,
})
const classA = ref("class1")
const classB = ref("class2")
const isActive = ref(true)
const hasError = ref(true)
const activeColor = ref("#99DD33")
const fontSize = ref(36)
const styleObject = ref({
    border: "2px" + " solid" + "#99AA33",
    fontSize: 28 + "px",
})
const styleObjectA = ref({
    color: "blue",
    fontSize: 32 + "px",
})
const styleObjectB = ref({
    background: "#EFEFDF",
})
</script>
<style scoped>
.red {
    color: red;
    font-size: 24px;
    font-weight: bold;
}

.class1 {
    color: green;
    font-size: 32px;
    font-weight: bolder;
}

.class2 {
    border: 1px dashed #0033cc;
}

.active {
    color: blue;
    text-decoration: underline;
}

.static {
    color: #667788;
    font-size: 22px;
}

.redText {
    color: red;
    background: #ededed;
}
</style>