vue3 动态css变量的使用

 

在 Vue 3.2 及以后的版本中，引入了对于动态 CSS 变量绑定的支持。这允许您在组件的 style 块内使用 v-bind() 函数来引用 JavaScript 中定义的变量，从而实现响应式的样式。

有单位的需要calc 计算

以下是使用 v-bind() 的基本示例： 在 setup 函数中定义并返回变量：

<template>
    <div class="dynamic-style">
      This div has a dynamic color and font-size.
    </div>
</template>

<script setup>
 import { ref } from 'vue'

// 定义响应式引用
const color = ref('red')
const fontSize = ref('20px')

// 返回引用，使其在模板和样式中可用
 return { color, fontSize }
</script>

<style>
 .dynamic-style {
     /* 使用 v-bind() 绑定 JavaScript 变量 */
     color: v-bind(color);
     font-size: v-bind(fontSize);
 }
</style>