根据服务端下发颜色值，动态太改变样式，发现了var() 函数非常适用，这么写了个demo随笔记录，方便以后查阅。

展示效果如下：

效果图

HTML部分

<div>   <p class="ttext"  :style="{ '--tcolor': colorArray[0] }">测试动态颜色0</p>   <p class="ttext"  :style="{ '--tcolor': colorArray[1] }">测试动态颜色1</p>   <p class="ttext"  :style="{ '--tcolor': colorArray[2] }">测试动态颜色2</p>   <p class="ttext"  :style="{ '--tcolor': colorArray[3] }">测试动态颜色3</p> </div>

数据定义（可服务端下发）

  data() {    return {      colorArray: [        "orange",        "green",        "purple",        "red"      ] ,    }

css部分

.ttext {  margin-top: 30px;  color: var(--tcolor);  text-align: center;  font-size: 20px;}

注：在data里面定义一个变量，css用var()函数来使用这个变量，变量前要加--

2、闪烁小红点

展示效果如下：

效果图

HTML部分

 <div>      <p class="tttext"  :style="{ '--tcolor': colorArray[0] }">      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>      测试动态颜色0      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p>      <p class="tttext"  :style="{ '--tcolor': colorArray[1] }">      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>      测试动态颜色1      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p>      <p class="tttext"  :style="{ '--tcolor': colorArray[2] }">      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>       测试动态颜色2      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p>      <p class="tttext"  :style="{ '--tcolor': colorArray[3] }">      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>      测试动态颜色3      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p></div>

通过isBlinking: true 来控制

css部分

.red-dot {width: 10px;height: 10px;background-color: red;border-radius: 50%;display: inline-block;}.blinking {animation: blink 1s infinite;}@keyframes blink {0%,100% {opacity: 1;}50% {opacity: 0;}}

如果对您有帮助，帮忙关注下，您的关注是我更新最大的动力！谢谢~~