vue如何根据数值判断颜色
作者：战斗中的老段
这篇文章主要介绍了vue如何根据数值判断颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue根据数值判断颜色
1.首先style样式给两种颜色 用:class 三元运算符判断出一种颜色
第一步：在style里边设置两种颜色
.green{
color: green;
}
.orange{
color: orangered;
}
在取数据的标签 里边 判断一种颜色
:class="item.quote.current >0 ?'orange': 'green'"
<van-grid-item v-for="item in arrQuotes" :key="item.quote.symbol">
<h5>{{ item.quote.name }}</h5>
<h5 :class="item.quote.current >0 ?'orange': 'green'">{{ item.quote.current }}</h5>
<p :class="item.quote.chg >0 ?'orange': 'green'">{{ item.quote.chg }}</p>
</van-grid-item>
vue中伪类元素 根据数据改变颜色
//css--------------------------------
&::before {
content: "";
position: absolute;
width: 5px;
height: 12px;
background: var(--color);//--------（--color）
top: 4px;
left: 0px;
border-radius: 2px;
}
//标签------------------
v-for='item in xxxxxx'
:style="{ '--color': item.background }"总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。