vue3动态css变量的使用

vue

<script lang="setup">
const rotate = ref<number>(0);
const color: string = "red";
const changeStatus = (): void => {
    rotate.value = -90;
}
</script>

<style>
.test {
  color: v-bind(color);
  transform: rotateX(calc(v-bind(rotate) * 1deg));
}
</style>

INFO

在 style 中的使用(有单位的需要 calc 计算)

如上面的代码rotateX的属性值的单位是deg，而rotate变量是一个数值, 数值转换为一个有单位的值，则需要在calc方法中进行转换

vue3动态css变量的使用 #

vue3动态css变量的使用