vue动态绑定css样式和class名

有的时候,需要根据后端传来的不同的值来写不同的样式,我的需求是在一个页面有一个评分,传给后台,在另一个页面获取传的这个值,根据这个值来判断哪个选项加粗。
在这里插入图片描述
代码:

<tr>
                         <td class="bigT  " colspan="6" style="font-size: 17px;font-weight: bold">一、老师总评:</td>
                         <td class="bigT1 "  colspan="24" style="font-size: 17px">
                             <span v-for="(item,index) in overall"  key="item.value" 
                                   :style="item.value==ruleForm.overallRating? style1:''">{{item.label}}</span>
                         </td>
                     </tr>
先在data写个数组,v-for循环,ruleForm.overallRating是从后台取的值,判断是否相等,再在data里写个style样式
data() {
  return {
    overall:[
                {value:0,label:"优秀"},
                {value:1,label:"良好"},
                {value:2,label:"及格"},
                {value:3,label:"不及格"},
            ],
	style1:{
                'font-weight':"bold",
                'font-size':18+"px"
            },
  }
}

绑定class也差不多

:class="{ 'active': isActive, 'sort': isSort }"
data() {
  return {
    isActive: true,
    isSort: false
  }
},
也可以这样
:class="classObject"
data() {
  return {
    classObject:{ active: true, sort:false }
  }
}
或者
:class="[isActive?'active':'']"
data() {
  return {
    isActive: true
  }
},
又或者这样
:class="[isActive,isSort]"
data() {
  return{
    isActive:'active',
    isSort:'sort'
 }
}

希望对你有帮助!

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值