关于Vue中动态绑定class和style的问题
一、需求今天碰到同事问了一个问题,根据后端返还的字段名字来绑定该名字的独有颜色,例如:'提现成功' --- 绿色。'提现失败' --- 红色。她是这样写的::style="[{item.status == '提现成功' ? 'color:green': ''},{item.status == '提现失败' ? 'color:red': ''}]",很显然,样式没有生效。二、问题其实这就是Vue给我
·
一、需求
今天碰到同事问了一个问题,根据后端返还的字段名字来绑定该名字的独有颜色,例如:'提现成功' --- 绿色。'提现失败' --- 红色。
她是这样写的::style="[{item.status == '提现成功' ? 'color:green': ''},{item.status == '提现失败' ? 'color:red': ''}]",很显然,样式没有生效。
二、问题
其实这就是Vue给我们的动态绑定写法格式问题,只不过我去翻了官网,并没有给出详细的类似于这种情况的书写方式,我也很久没有写过动态绑定,于是自己尝试了几种写法,奈何都没有生效,最后得出应该这么写:
动态绑定style-----:style="{color:true?'red':'',color:true?'blue':''}"
动态绑定class-----:class="[false ? 'redClass' : '',true ? 'blueClass' : '']"
遇到多种判断时,直接在该三元运算符后加上下一个判断条件(三元运算符)即可。
三、代码
解决~
更多推荐
已为社区贡献2条内容
所有评论(0)