根据服务端下发颜色值,动态太改变样式,发现了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;
}
}