一、前言

• 由此篇延伸而出CSS使用JS变量 - 掘金 (juejin.cn)
• 仅做参考及个人笔记

二、代码详情

<template>
  <div class="box">
    <div class="aaa" :style="{'--color': 'blue'}">aaa</div>
    <div class="aaa" :style="{'--color': 'red'}">bbb</div>
    <div class="aaa" :style="{'--color': 'pink'}">ccc</div>
    <div class="aaa" :style="{'--color': 'yellow'}">ddd</div>
    <div class="aaa" :style="{'--color': colorflag}">aaa</div>
    <div class="aaa" :style="{'--color': colorflag}">aaa</div>
    <div class="aaa" :style="{'--color': colorflag}">aaa</div>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const colorflag = ref(null);
const num = ref(0);
const colorList = ref(['red', 'pink', 'blue', 'yellow']);

// 闪着玩，仅做测试
function chanegColor() {
  if(num.value > colorList.value.length - 1) return;
  colorflag.value = colorList.value[num.value];
  setTimeout(() => {
    num.value++;
    chanegColor();
  }, 1000);
}

chanegColor();
</script>
<style scoped lang="scss">
body {
  --color: #cccccc;
}
.aaa {
  color: var(--color);
}
</style>