Vue3动态CSS实现

前言

在Vue3中,CSS支持使用v-bind()动态绑定

html部分

<template>
    <div>
        <h1 @click="color = '#f60'" class="index">六思逸</h1>
    </div>
</template>

js部分

<script setup>
import { ref } from 'vue';
let color = ref('#0f0')
</script>

css部分

<style lang="scss" scoped>
.index {
    background-color: v-bind(color);
    color: #fff;
}
</style>