求教vue绑定class的简洁写法

Question

 <div class="status" :class="{cancel:item.canceled,wait:item.statusType=='3'||item.statusType=='4'||item.statusType=='5'||item.statusType=='6',success:item.statusType=='7'}"></div>

如图，在vue中根据状态绑定dom的class,其中多种状态对应为同一class，除了上面代码中的脑残写法外，有什么简洁点的吗？

Answer 1

用 计算属性

添加点伪代码

 computed: {
        myClass:function () {
          return {
              wait:[3,4,5,6].indexOf(this.item.statusType)>-1,
              success:this.item.statusType===7,
              cancle:this.item.cancled

          }
        }
     }

Answer 2

HTML:
<div :class="domClass"></div>

JS:
computed: {

domClass(){
    return [
        'status',
        {
            ['cancel']: this.item.canceled,
            ['wait']: [3,4,5,6,7].indexOf(this.item.statusType) != -1
        }
   ];
}

}

Answer 3

如果class处理的逻辑过多，建议用对象或者函数处理，页面显得干净

<div class="status" :class="className(item)"></div>

methods:{
    className(item){
    retutn      {cancel:item.canceled,wait:item.statusType=='3'||item.statusType=='4'||
    item.statusType=='5'||item.statusType=='6',success:item.statusType=='7'}
    }
}

Answer 4

<div class="status" :class="{cancel:item.canceled,wait:'3'<=item.statusType &&
 item.statusType<='6',success:item.statusType=='7'}"></div>

另外给个建议，数字类型字段不要用字符类型去判断，因为字符判断是根据ASCII码来的，比如表达式'3'<'10'的结果是false，但如果是3<10返回的就是正确的true了