vue如何根據(jù)數(shù)值判斷顏色
更新時間：2024年03月20日 09:48:27 作者：戰(zhàn)斗中的老段
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue根據(jù)數(shù)值判斷顏色
1.首先style樣式給兩種顏色 用:class 三元運(yùn)算符判斷出一種顏色
第一步：在style里邊設(shè)置兩種顏色
.green{
color: green;
}
.orange{
color: orangered;
}
在取數(shù)據(jù)的標(biāo)簽 里邊 判斷一種顏色
: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中偽類元素 根據(jù)數(shù)據(jù)改變顏色
//css--------------------------------
&::before {
content: "";
position: absolute;
width: 5px;
height: 12px;
background: var(--color);//--------（--color）
top: 4px;
left: 0px;
border-radius: 2px;
}
//標(biāo)簽------------------
v-for='item in xxxxxx'
:style="{ '--color': item.background }"總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue項目的屏幕自適應(yīng)多個方案的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
項目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久，發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來實(shí)現(xiàn)的,需要的朋友可以參考下2021-06-06
Vue單頁式應(yīng)用(Hash模式下)實(shí)現(xiàn)微信分享的實(shí)例
本篇文章介紹了Vue單頁式應(yīng)用(Hash模式下)實(shí)現(xiàn)微信分享的實(shí)例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue項目或網(wǎng)頁上實(shí)現(xiàn)文字轉(zhuǎn)換成語音播放功能
這篇文章主要介紹了在vue項目或網(wǎng)頁上實(shí)現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue3中Vant的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue項目實(shí)現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項目實(shí)現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue2.0 實(shí)現(xiàn)頁面導(dǎo)航提示引導(dǎo)的方法
下面小編就為大家分享一篇vue2.0 實(shí)現(xiàn)頁面導(dǎo)航提示引導(dǎo)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3 實(shí)現(xiàn)牙位圖選擇器的實(shí)例代碼
這篇文章主要介紹了vue3 實(shí)現(xiàn)牙位圖選擇器的實(shí)例代碼,代碼簡單易懂,需要的朋友參考下吧2025-04-04
Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02
本篇文章主要介紹了詳解vue.js的devtools安裝 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05