vue3.0 動態css變量的使用

setup中定義變量以及在style中的使用(有單位的需要calc 計算)

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

    return {
      rotate,
      color,
    };
  },

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