一、需求

       今天碰到同事问了一个问题,根据后端返还的字段名字来绑定该名字的独有颜色,例如:'提现成功' --- 绿色。'提现失败' --- 红色。

        她是这样写的::style="[{item.status == '提现成功' ? 'color:green': ''},{item.status == '提现失败' ? 'color:red': ''}]",很显然,样式没有生效。

二、问题

        其实这就是Vue给我们的动态绑定写法格式问题,只不过我去翻了官网,并没有给出详细的类似于这种情况的书写方式,我也很久没有写过动态绑定,于是自己尝试了几种写法,奈何都没有生效,最后得出应该这么写:

 动态绑定style-----:style="{color:true?'red':'',color:true?'blue':''}"

动态绑定class-----:class="[false ? 'redClass' : '',true ? 'blueClass' : '']"

遇到多种判断时,直接在该三元运算符后加上下一个判断条件(三元运算符)即可。

三、代码

 

 解决~

 

Logo

前往低代码交流专区

更多推荐