Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
更新時(shí)間：2020年08月09日 08:41:35 作者：web coder
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
假設(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通過判斷寫樣式(v-bind)
如下所示：
v-bind:style="$index % 2 > 0?'background-color:#FFF;':'background-color:#D4EAFA;'"
以上這篇Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue分割面板封裝實(shí)現(xiàn)記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法，通常我們使用組件的方式是，在實(shí)例化Vue對(duì)象之前，通過Vue.component方法來注冊(cè)全局的組件,文中通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-01-01
全面解析vue router 基本使用(動(dòng)態(tài)路由，嵌套路由)
路由，其實(shí)就是指向的意思，當(dāng)我點(diǎn)擊頁面上的home按鈕時(shí)，頁面中就要顯示home的內(nèi)容，如果點(diǎn)擊頁面上的about 按鈕，頁面中就要顯示about 的內(nèi)容。這篇文章主要介紹了vue router 基本使用 ,需要的朋友可以參考下2018-09-09
vue-draggable實(shí)現(xiàn)pc端拖拽效果
這篇文章主要為大家詳細(xì)介紹了vue-draggable實(shí)現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問題及解決
這篇文章主要介紹了Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
深入探討如何在Vue中使用EventBus實(shí)現(xiàn)組件間的高效通信
在現(xiàn)代前端開發(fā)中,Vue.js?作為一種流行的漸進(jìn)式框架,廣泛應(yīng)用于各類?Web?項(xiàng)目的構(gòu)建中,本文將深入探討如何在?Vue?中使用?EventBus,實(shí)現(xiàn)組件間的高效通信,需要的可以了解下2024-11-11
vue項(xiàng)目使用node連接數(shù)據(jù)庫的方法(前后端分離)
這篇文章主要介紹了vue項(xiàng)目使用node連接數(shù)據(jù)庫（前后端分離），本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了TinyMCE富文本編輯器在Vue中的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09