Vue3 第二十六篇：响应式Css

在css中可以直接绑定js中的变量，改变变量，css做出相应的响应。

<script setup lang='ts'>
import { ref } from 'vue';

let mindColor = ref('red')
const change = () => {
    if (mindColor.value == 'blue') {
        mindColor.value = 'red'
    } else {
        mindColor.value = 'blue'
    }

}
</script>

<template>
    <div>
        <h1 class="home">主页</h1>
        <el-button type="primary" size="default" @click="change">切换按钮</el-button>
    </div>
</template>

<style lang='less' scoped>
.home {
    color: v-bind(mindColor)
}
</style>