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