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.mfbz.cn/a/100744.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CSS 实现平面圆点绕椭圆动画

前言 &#x1f44f;CSS实现平面圆点绕椭圆动画,速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现原理 transform-style&#xff1a;CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面&#xf…

QTday3(对话框、发布软件、事件处理核心机制)

一、Xmind整理&#xff1a; 二、上课笔记整理&#xff1a; 1.消息对话框&#xff08;QMessageBox&#xff09; ①基于属性版本的API QMessageBox::QMessageBox( //有参构造函数名QMessageBox::Icon icon, //图标const Q…

短信验证码服务

使用的是 阿里云 阿里云官网 1.找到 左上角侧边栏 -云通信 -短信服务 2.在快速学习测试处 &#xff0c;按照步骤完成快速学习&#xff0c;绑定要测试的手机号&#xff0c;选专用 【测试模板】&#xff0c;自定义模板需要人工审核&#xff0c;要一个工作日 3.右上角 获取 Acces…

常见网络通信协议(http、https、ws)及安全协议(SSL、TLS、XTLS)

文章内容删除了一大半不合适的内容&#xff0c;发不出来&#xff0c;你懂得。&#x1f970; 一、常见网络通信协议1.1、HTTP 协议1.11 HTTP 协议简介1.12 HTTP 协议的工作流程1.13 HTTP 协议的常用方法1.14 HTTP 协议的常见状态码1.15 HTTP 的缺点 1.2 HTTPS 协议1.21 HTTPS 协…

C# 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)

C# 在调用Cdll时&#xff0c;可能会出现 &#xff1a;试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)这个错误。 一般情况下是C#目标平台跟Cdll不兼容&#xff0c;64位跟32位兼容性问题&#xff0c; a.客户端调用Cdll报的错则&#xff0c; 1)允许的话把C#客户端…

怎样免费在公司访问家中的树莓派

最近拿起了大学时买的树莓派&#xff0c;刚好看到了一篇文章写到无公网IP&#xff0c;从公网SSH远程访问家中的树莓派 便来试试&#xff1a; 我的树莓派之前装过ssh&#xff0c;所以插上电就能用了。其实过程很简单&#xff0c;只需要在树莓派中下载一个cpolar即可。 curl -…

解密Spring事务生效的内部机制

声明式事务和编程式事务对比&#xff1a; 声明式事务&#xff1a; 使用注解或XML配置的方式&#xff0c;在代码中声明事务的属性和行为。通过AOP和代理模式实现&#xff0c;将事务管理与业务逻辑代码解耦。适用于大多数情况&#xff0c;简化了代码&#xff0c;提高了可维护性和…

Python分享之redis(2)

Hash 操作 redis中的Hash 在内存中类似于一个name对应一个dic来存储 hset(name, key, value) #name对应的hash中设置一个键值对&#xff08;不存在&#xff0c;则创建&#xff0c;否则&#xff0c;修改&#xff09; r.hset("dic_name","a1","aa&quo…

学用 CountDownLatch 与 CyclicBarrier

开篇即说结论&#xff0c;如果搞不清楚两者区别&#xff0c;那就无脑用 CountDownLatch&#xff0c;问题也不大&#xff08;因为我也不是太懂&#xff09;。 CountDownLatch 模拟了100米赛跑&#xff0c;10名选手已经准备就绪&#xff0c;只等裁判一声令下。当所有人都到达终…

8月28日上课内容 第四章 MySQL备份与恢复

本章结构 前言&#xff1a;日志⭐⭐ MySQL 的日志默认保存位置为 /usr/local/mysql/data ##配置文件 vim /etc/my.cnf [mysqld] ##错误日志&#xff0c;用来记录当MySQL启动、停止或运行时发生的错误信息&#xff0c;默认已开启 log-error/usr/local/mysql/data/mysql_error.l…

Docker 容器学习笔记

Docker 容器学习笔记 容器的由来 早先&#xff0c;虚拟机通过操作系统实现相互隔离&#xff0c;保证应用程序在运行时相互独立&#xff0c;避免相互干扰。但是操作系统又笨又重&#xff0c;耗费资源严重&#xff1a; 容器技术只隔离应用程序的运行时环境但容器之间共享同一个…

统一使用某一个包管理工具,比如yarn pnpm

原因&#xff1a;前端每个人的习性不一样&#xff0c;有人用npm 有人用yarn等包管理工具&#xff0c;混合下载插件容易出bug&#xff0c;就用个小工具锁住就行了&#xff0c;只能使用yarn或者pnpm反向下载依赖和下载插件。不然就报错 1.在项目主目录下创建preinstall.js // 如…

你搞清楚了吗?| GET请求方式的长度限制到底是多少?

目录 &#x1f4cd; 浏览器限制 &#x1f4cd; 服务器限制 在大多数人的一贯认识中&#xff0c;一直认为get请求方式有2048B的长度限制&#xff0c;其实这种说法是有失偏颇的&#xff0c;甚至可以说是错误的。 这个问题一直以来似乎是被N多人误解&#xff0c;其实Http Get方…

分布式锁实现二. memcached分布式锁

文章目录 memcached分布式锁实现原理&#xff1a;优缺点 开发准备安装memcached服务端安装jar到maven本地仓库 代码开发初始化Memcached客户端锁相关操作核心代码本地运行效果docker运行效果 memcached分布式锁 实现原理&#xff1a; memcached带有add函数&#xff0c;利用ad…

VScode 国内下载源 以及 nvm版本控制器下载与使用

VScode 国内下载源 进入官网 https://code.visualstudio.com/ 点击下载 复制下载链接到新的浏览器标签 将地址中的/stable前的az764295.vo.msecnd.net换成vscode.cdn.azure.cn&#xff0c;再回车就会直接在下载列表啦。 参考大神博客 2.使用nvm 对 node 和npm进行版本控制…

重装Windows10系统

以前清理电脑我一般是重置电脑的&#xff0c;但是重置电脑会清理C盘&#xff0c;新系统又遗留有以前的系统文件&#xff0c;导致后面配置环境遇到了棘手的问题&#xff0c;所以我打算重装系统。 第一次重装windows10系统&#xff0c;踩了很多坑&#xff0c;搞了两天才配回原来的…

Linux知识点 -- Linux多线程(四)

Linux知识点 – Linux多线程&#xff08;四&#xff09; 文章目录 Linux知识点 -- Linux多线程&#xff08;四&#xff09;一、线程池1.概念2.实现3.单例模式的线程池 二、STL、智能指针和线程安全1.STL的容器是否是线程安全的2.智能指针是否是线程安全的 三、其他常见的各种锁…

Mac移动硬盘怎么识别PC电脑?

如果你拥有一台Mac设备&#xff0c;总会遇到尴尬的那一刻——你在Mac上用得好好的移动硬盘怎么都不能被PC识别到。又或者你朋友在PC上用得好好的移动硬盘&#xff0c;连上你的Mac后&#xff0c;Mac里的文件死活就是拷贝不进移动硬盘里。这种坑&#xff0c;相信大多数使用Mac的小…

webpack(一)模块化

模块化演变过程 阶段一&#xff1a;基于文件的划分模块方式 概念&#xff1a;将每个功能和相关数据状态分别放在单独的文件里 约定每一个文件就是一个单独的模块&#xff0c;使用每个模块&#xff0c;直接调用这个模块的成员 缺点&#xff1a;所有的成员都可以在模块外被访问和…

Kubernetes(K8s)基本环境部署

此处只做学习使用&#xff0c;配置单master环境。 一、环境准备 1、ip主机规划&#xff08;准备五台新机&#xff09;>修改各个节点的主机名 注意&#xff1a;关闭防火墙与selinux 节点主机名ip身份joshua1 kubernetes-master.openlab.cn 192.168.134.151masterjoshua2k…
最新文章