0

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

挑战 451
11月8日提问
3 个回答
1

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

0

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

0

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

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

}
}

撰写答案

推广链接