vue如何根據(jù)數(shù)值判斷顏色
更新時間:2024年03月20日 09:48:27 作者:戰(zhàn)斗中的老段
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue根據(jù)數(shù)值判斷顏色

1.首先style樣式給兩種顏色 用:class 三元運算符判斷出一種顏色
第一步:在style里邊設置兩種顏色
.green{
color: green;
}
.orange{
color: orangered;
}
在取數(shù)據(jù)的標簽 里邊 判斷一種顏色
: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;
}
//標簽------------------
v-for='item in xxxxxx'
:style="{ '--color': item.background }"總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue實現(xiàn)在線預覽pdf文件功能(利用pdf.js/iframe/embed)
項目要求需要預覽pdf文件,網(wǎng)上找了很久,發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關于Vue實現(xiàn)在線預覽pdf文件功能,主要利用pdf.js/iframe/embed來實現(xiàn)的,需要的朋友可以參考下2021-06-06
Vue單頁式應用(Hash模式下)實現(xiàn)微信分享的實例
本篇文章介紹了Vue單頁式應用(Hash模式下)實現(xiàn)微信分享的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音播放功能
這篇文章主要介紹了在vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下2020-06-06
vue項目實現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項目實現(xiàn)減少app.js和vender.js的體積操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11

