vue class绑定,这个可以优化一下吗?

模板是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),我是想让||前后各为一组然后进行判断

阅读 377
评论
    3 个回答

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

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

    }
    }