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>

posted @ 2021-03-28 13:52  boyyang  阅读(2042)  评论(0编辑  收藏  举报
//黑猫咪:https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json //白猫咪:https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json //萌娘:https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json //狗狗:https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json //萌妹1号:https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json //萌妹2号:https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json //萌妹3号:https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json //妹子4号:https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json //妹子5号:https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json //6号:https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json //7号:https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json //8号:https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json //9号:https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json //10号:https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json //11号:https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json //帅哥1号:https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json //帅哥2号:https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json