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

阅读 228
评论 更新于 2019-11-08
    3 个回答
    FX052
    • 416

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

    评论 赞赏 2019-11-08

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

      评论 赞赏 2019-11-08

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

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

        }
        }

        评论 赞赏 2019-11-09
          撰写回答

          登录后参与交流、获取后续更新提醒