vue class绑定，这个可以优化一下吗？

Question

模板是pug的，在vue项目中动态绑定class，现在这种class绑定是能用的，但是有点太长了放在标签部分，有没有什么改写的方法，因为判断用的number和item都是来自列表循环中的，我不知道应该怎么优化？
:class="[number===2||number===4?'flex-2':'flex-1',
(item.maxIsExceed && number===2||item.secondIsExceed && number===4)?'colorRed':'']")
完整代码：

li.item.flex.flex-1(v-for="item,index in RegionContent")
 span.regionCountFont(v-for="props,number in TransactionTabs" 
:class="[number===2||number===4?'flex-2':'flex-1',
(item.maxIsExceed && number===2||item.secondIsExceed && number===4)?
'colorRed':'']") {{item[props.prop]}}

还有这个的执行顺序(item.maxIsExceed && number===2||item.secondIsExceed && number===4),我是想让||前后各为一组然后进行判断

Answer 1

class有个库非常好用 叫classnames
应该可以简化你的代码

Answer 2

介意写在computed里，可读性更强

Answer 3

写成函数就好了 :style="getCss()"
methods：{
getCss(){
return {

        width: width + "px",
        height: height + "px",
        left: left + "px",
        top : top + "px",
      }

}
}