HBuilder X 3.3.13版本编译问题（uniapp）

问题描述

uniapp开发中使用dom上的动态class，动态style等语法，导致最终编译出来的页面，有明显问题 或 dom错乱。

问题场景

问题出现在uniapp的低版本HBuilderX中，进行编译app，小程序等

代码片段

:class="{'tab-default': tabs.list.length}"

props: {
    tabs: {
      type: Object,
      default: () => ({})
    }
}

问题原因

由于该组件加载时，dom获取tabs.list的值为undefined，所以此时的tabs.list.length会报错，导致该dom无法进行正常渲染。

问题解决

1、在dom上，可对tabs.list做一次值判断，再进行.length操作

:class="{'tab-default': tabs.list && tabs.list.length}"

2、将tabs.list.length的值放到js中进行判断、计算

computed: {
    tabsLength() {
      let { list = [] } = this.tabs
      return list.length
    }
}

关键词

编译失败、uniapp编译、HBuilder编译、样式错乱、编译不显示、动态class、动态style