Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
更新時(shí)間：2020年08月09日 08:41:35 作者：web coder
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
假設(shè)有需求：
后臺(tái)返回狀態(tài)1:啟用，0：禁用
1、若要使啟用為綠色，禁用不添加其他樣式
<el-table-column
prop="statusName"
align="center"
label="狀態(tài)">
<template slot-scope="scope">
<div :class="{active:scope.row.status==1}">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
.active{
color:green;
}
1、若要使啟用為綠色，禁用為紅色，可使用三元表達(dá)式綁定樣式
<el-table-column
prop="statusName"
align="center"
label="狀態(tài)">
<template slot-scope="scope">
<div :class="scope.row.status==1? 'active':'native'">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
.active{
color:green;
}
.native{
color:red;
}
補(bǔ)充知識(shí)：vue通過(guò)判斷寫(xiě)樣式(v-bind)
如下所示：
v-bind:style="$index % 2 > 0?'background-color:#FFF;':'background-color:#D4EAFA;'"
以上這篇Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
父子組件之間的雙向綁定非常簡(jiǎn)單，但是很多人因?yàn)槭菑腣ue 2+開(kāi)始使用的，可能不知道如何雙向綁定，接下來(lái)通過(guò)本文給大家介紹Vue父子組件雙向綁定傳值的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-07-07
詳解如何使用vue實(shí)現(xiàn)可視化界面設(shè)計(jì)
Vue是一款流行的前端開(kāi)發(fā)框架,它的響應(yīng)式數(shù)據(jù)綁定和組件化特性使得它成為了可視化界面設(shè)計(jì)的一個(gè)理想選擇,本文將介紹如何使用Vue實(shí)現(xiàn)可視化界面設(shè)計(jì),并且演示一個(gè)基于Vue的可視化界面設(shè)計(jì)案例,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中的.vue文件的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了在nuxt中使用路由重定向的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue3中實(shí)現(xiàn)發(fā)送網(wǎng)絡(luò)請(qǐng)求功能(最新推薦)
Axios是一個(gè)基于Promise的HTTP客戶端,可以在瀏覽器和Node.js中用于發(fā)送HTTP請(qǐng)求,本文主要介紹在Vue3中實(shí)現(xiàn)發(fā)送網(wǎng)絡(luò)請(qǐng)求功能,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue.js購(gòu)物車(chē)添加商品組件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)和解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue仿淘寶滑動(dòng)驗(yàn)證碼功能(樣式模仿)
淘寶大家都使用過(guò)，淘寶滑動(dòng)驗(yàn)證碼的目的是為了驗(yàn)證到底是人還是機(jī)器，今天小編給大家分享的是模仿淘寶滑動(dòng)驗(yàn)證碼的樣式，感興趣的朋友跟隨小編一起看看吧2019-12-12
Vue3響應(yīng)式方案及ref?reactive的區(qū)別詳解
眾所周知ref和reactive都是用來(lái)作響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式方案及ref?reactive區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12