css 根据正数显示红色 =====负数显示绿色

最新推荐文章于 2024-04-18 14:13:00 发布

战斗中的老段

最新推荐文章于 2024-04-18 14:13:00 发布

阅读量1.1k

点赞数

分类专栏： flex 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_48203828/article/details/126314029

版权

flex 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

1、先在页面写两个样式一个red一个green

.green{
    color: green;
}
.red{
    color:orangered;
}

2、在页面中用三元运算符判断

 <!-- 三元运算符   大于0就显示红色;小于0 就显示绿色 -->
         <h5 :class="item.quote.current > 0 ? 'red' : 'green'">{{ item.quote.current}}</h5>
         <p :class="item.quote.chg > 0 ? 'red' : 'green'"> {{ item.quote.chg }}</p>