Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
假設(shè)有需求:
后臺(tái)返回狀態(tài)1:啟用,0:禁用
1、若要使啟用為綠色,禁用不添加其他樣式
<el-table-column prop='statusName' 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' 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è)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例2. python中PyQuery庫用法分享3. python操作數(shù)據(jù)庫獲取結(jié)果之fetchone和fetchall的區(qū)別說明4. Ajax實(shí)現(xiàn)頁面無刷新留言效果5. php5.6不能擴(kuò)展redis.so的解決方法6. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能7. 阿里前端開發(fā)中的規(guī)范要求8. 關(guān)于HTML5的img標(biāo)簽9. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效10. PHP獲取時(shí)間戳等相關(guān)函數(shù)匯總
