Vue中的 :class中绑定多个属性的方式
style中的样式:.tlf12 {text-align: left;font-size: 12px;}.colorRed {color:red!important;}.colorGreen {color:#3dfb96!important;}需求:<span></span>中的class默认有 tlf12 这个样式,当item.updateStat...
·
style中的样式:
.tlf12 {text-align: left;font-size: 12px;}
.colorRed {color:red!important;}
.colorGreen {color:#3dfb96!important;}
需求:<span></span>中的class默认有 tlf12 这个样式,当 item.updateStatus==1时应用colorRed,否则应用colorGreen
1、使用数组
<span :class="['tlf12', item.updateStatus==1 ? 'colorRed':'colorGreen']">{{item.updateTime}}</span>
2、使用JSON格式
<span :class="[{'tlf12':true}, {'colorRed':item.updateStatus==1}, {'colorGreen':item.updateStatus!=1}]">{{item.updateTime}}</span>
3、class和:class并存,使用三元表达式
<span class="tlf12" :class="item.updateStatus==1 ? 'colorRed':'colorGreen'">{{item.updateTime}}</span>
4、使用计算属性
<span :class="updateStatusCls(item.updateStatus)">{{item.updateTime}}</span>
computed:{ updateStatusCls() { //计算属性无法直接进行传参,使用匿名函数 return function(updateStatus){ return { 'tlf12':true, 'colorRed':updateStatus == '1', 'colorGreen':updateStatus != '1' } } } }
更多推荐
已为社区贡献1条内容
所有评论(0)