当前位置: 首页 > news >正文

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>
http://www.lryc.cn/news/151822.html

相关文章:

  • Hugging Face 实战系列 总目录
  • 国标视频云服务EasyGBS国标视频平台迁移服务器后无法启动的问题解决方法
  • HTML <th> 标签
  • HTTP/1.1协议中的响应报文
  • TDengine函数大全-选择函数
  • 非关系型数据库Redis的安装
  • oracle 创建数据库
  • wxWidgets从空项目开始Hello World
  • 【Apollo学习笔记】——规划模块TASK之SPEED_DECIDER
  • 【操作系统】一文快速入门,很适合JAVA后端看
  • C++ Primer阅读笔记--allocator类的使用
  • 【C++历险记】面向对象|菱形继承及菱形虚拟继承
  • 【Locomotor运动模块】攀爬
  • ELK安装、部署、调试(一)设计规划及准备
  • 【CSS】解决对齐的小问题
  • 【狂神】Spring5(Aop的实现方式)
  • 第2章 Linux多进程开发 2.18 内存映射
  • 【C++深入浅出】类和对象上篇(类的基础、类的模型以及this指针)
  • 气象站在日常生活中的重要性
  • 数据结构学习系列之用队列实现栈功能与用栈实现队列功能
  • PY32F003F18P单片机概述
  • 查看GPU占用率
  • 设计模式-中介者模式
  • react 大杂烩
  • 图解 STP
  • Kubernetes技术--k8s核心技术Controller控制器
  • Kubernetes技术--k8s核心技术 Secret
  • day27 String类 正则表达式
  • Java设计模式:四、行为型模式-10:访问者模式
  • 【juc】读写锁ReentrantReadWriteLock