在vue 中 css 使用 js 变量

1. vue2：

<template>
  <div
    :style="userStyle"
    class="word"
  >
    哈哈哈哈哈
  </div>
</template>

<script>
export default {
  data () {
    return {
      speed: 20
    }
  },
  computed: {
    userStyle () {
      return {
       "--speed": this.speed + 240 + "deg",
      }
    }
  }
</script>

<style scoped>
.word {
    animation: lunpan 1s steps(1, start);
    animation-fill-mode: forwards;
}

@keyframes lunpan {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(var(--speed));
  }
}
</style>

2. vue3(optional api)

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

3. vue3(Composition API)

<template>
  <div class="text">hello</div>
</template>

<script setup>
import { ref } from "vue";
const customTheme = ref({
    color: 'red'
});
</script>

<style>
.text {
  color: v-bind("customTheme.color");
}
</style>