脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue根据数值判断颜色

vue如何根据数值判断颜色

 更新时间：2024年03月20日 09:48:27   作者：战斗中的老段  
这篇文章主要介绍了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 }"

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论