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 }"

总结

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

您可能感兴趣的文章:

vue下载excel的实现代码后台用post方法
这篇文章主要介绍了vue下载excel的实现代码,后台用post方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05
vue.js实现二级菜单效果
这篇文章主要为大家详细介绍了vue.js实现二级菜单效果的具体方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
解决vue加scoped后就无法修改vant的UI组件的样式问题
这篇文章主要介绍了解决vue加scoped后就无法修改vant的UI组件的样式问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vuex 实现getter值赋值给vue组件里的data示例
今天小编就为大家分享一篇vuex 实现getter值赋值给vue组件里的data示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
在vue中使用eslint,配合vscode的操作
这篇文章主要介绍了在vue中使用eslint,配合vscode的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue使用sass根据环境进行样式判断区分方式
这篇文章主要介绍了vue使用sass根据环境进行样式判断区分方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue配置多代理服务接口地址操作
这篇文章主要介绍了vue配置多代理服务接口地址操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue & vue Cli 版本及对应关系解读
这篇文章主要介绍了vue & vue Cli 版本及对应关系，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
在Vue实例上挂载自己定义的工具类的操作方法
在实际的Vue开发中,我们经常需要在多个组件之间共享一些工具函数或类,比如格式化日期、处理字符串、操作数组等,本文将详细介绍如何在Vue实例上挂载自己定义的工具类,并在项目中高效使用这些工具,需要的朋友可以参考下
2024-09-09
Vue Ref全家桶具体用法详解
ref用来辅助我们获取DOM元素或组件的引用实例对象,每个vue的组件实例上,都包含一个refs对象,里面存储着对应的DOM元素或组件的引用,默认情况下,组件的refs指向一个空对象
2023-03-03