vue class根据传值决定样式

方法1，使用函数决定返回值,，函数中进行逻辑判断。代码如下

<td :class="getStatusClasses(status)">
           <span v-if="status==0">未操作</span>
           <span  v-else-if="status==1" >成功</span>
           <span  v-else-if="status==2">失败</span>
           <span v-else>状态未知</span>
  </td>

var history = new Vue({
            el: "#history",
            data: {},
            methods:{
                     getStatusClasses(status){
                    if (status=="审批未通过"){
                        return 'bg-warning'
                    }else if(status=="审批通过"){
                        return 'bg-success'
                    }else{
                        return 'bg-info'
                    }

}

方法2，使用三元式

   <div :class="status===1?'bg-warning':'bg-success'"></div>

文章来源地址https://uudwc.com/A/a9pLR