vue如何根據(jù)數(shù)值判斷顏色
更新時(shí)間：2024年03月20日 09:48:27 作者：戰(zhàn)斗中的老段
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue下載excel的實(shí)現(xiàn)代碼后臺(tái)用post方法
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺(tái)用post方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)二級(jí)菜單效果的具體方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題
這篇文章主要介紹了解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了在vue中使用eslint,配合vscode的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue使用sass根據(jù)環(huán)境進(jìn)行樣式判斷區(qū)分方式
這篇文章主要介紹了vue使用sass根據(jù)環(huán)境進(jìn)行樣式判斷區(qū)分方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue配置多代理服務(wù)接口地址操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue & vue Cli 版本及對(duì)應(yīng)關(guān)系解讀
這篇文章主要介紹了vue & vue Cli 版本及對(duì)應(yīng)關(guān)系，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
在實(shí)際的Vue開(kāi)發(fā)中,我們經(jīng)常需要在多個(gè)組件之間共享一些工具函數(shù)或類,比如格式化日期、處理字符串、操作數(shù)組等,本文將詳細(xì)介紹如何在Vue實(shí)例上掛載自己定義的工具類,并在項(xiàng)目中高效使用這些工具,需要的朋友可以參考下2024-09-09
ref用來(lái)輔助我們獲取DOM元素或組件的引用實(shí)例對(duì)象,每個(gè)vue的組件實(shí)例上,都包含一個(gè)refs對(duì)象,里面存儲(chǔ)著對(duì)應(yīng)的DOM元素或組件的引用,默認(rèn)情況下,組件的refs指向一個(gè)空對(duì)象2023-03-03