新版本的uniapp明确说明动态绑定class不能使用Object，但是下图这个错误是什么意思？

代码怎么写的，给全一点。
另外错误日志也再截全一些

<template>  
  <!-- 传递demo对象 -->  
  <div class="box">  
    <!-- 宴会厅名称 -->  
    <div class="top">  
      <scroll-view scroll-x="true" @scroll="scrollOn" :scroll-left="scrollPosition">  
        <div class="tab" :style="{width:navWidth}">  
          <!-- 列表 -->  
          <div class="item" v-for="(tab,index) in list" :key="index">{{tab.area_name}}</div>  
        </div>  
      </scroll-view>  
    </div>  
    <!-- 日期列表 -->  
    <div class="left">  
      <!-- 撑高度的白块 -->  
      <div class="date" style="height:35px;"></div>  
      <!-- 日期列表 -->  
      <div class="date" v-for="(item,index) in num" :key="index">04-0{{index+1}}</div>  
    </div>  
    <!-- 列表 -->  
    <scroll-view scroll-x="true" @scroll="scrollOn" :scroll-left="scrollPosition">  
      <div class="itemList" :style="{width:hotelWidth}">  
        <!-- 每一个li都是一列 -->  
        <div class="item" v-for="(main,mainIndex) in list" :key="mainIndex">  
          <div class="sonList" v-for="(hotel,index) in num" :key="index">  
            <div  
              class="topSon"  
              :class="sonShow(main,index,'top')"  
              v-if="sonShow(main,index,'show')"  
            ></div>  
            <div  
              class="bottomSon"  
              :class="sonShow(main,index,'bottom')"  
              v-if="sonShow(main,index,'show')"  
            ></div>  
            <!-- <div class="allSon"></div> -->  
          </div>  
        </div>  
      </div>  
    </scroll-view>  
  </div>  
</template>  
<script>  
export default {  
  computed: {  
    // 由于计算属性不能传参，使用闭包，因为模板中不允许使用函数，uniapp兼容问题，注意；  
    sonShow() {  
      return function(main, index, type) {  
        // 循环拿到days  
        for (let key in main.revel_info) {  
          // 拿到当月的第几天  
          var days = main.revel_info[key].revel_time.getDate().toString();  
          // 拿到午餐状态  
          var lunch = main.revel_info[key].lunch_status;  
          // 拿到晚餐状态  
          var dinner = main.revel_info[key].dinner_status;  
          if (type == "show") {  
            // 循环time在第几天  
            if (days == index + 1) {  
              return true;  
            }  
          } else if (type == "top") {  
            // 控制颜色  
            if (days == index + 1) {  
              if (lunch == 0) {  
                // 未预定  
                return;  
              } else if (lunch == 1) {  
                // 预定  
                return {  
                  purple: true // 显示紫色  
                };  
              } else if (lunch == 2) {  
                // 确定  
                return {  
                  red: true // 确定  
                };  
              }  
            }  
          } else if (type == "bottom") {  
            // 控制颜色  
            if (days == index + 1) {  
              if (dinner == 0) {  
                // 未预定  
                return;  
              } else if (dinner == 1) {  
                // 预定  
                return {  
                  purple: true // 显示紫色  
                };  
              } else if (dinner == 2) {  
                // 确定  
                return {  
                  red: true // 确定  
                };  
              }  
            }  
          }  
        }  
      };  
    }  
  },  
  data() {  
    return {  
      num: 31,  
      navNum: 12,  
      navWidth: 0,  
      hotelWidth: 0,  
      scrollPosition: null  
    };  
  },  
  mounted() {  
    // 返回附给nav尺寸  
    this.loadNavWidth();  
  },  
  methods: {  
    scrollOn(e) {  
      this.scrollPosition = e.detail.scrollLeft;  
    },  
    loadNavWidth() {  
      // 获取长度  
      let navNum = 70 * this.list.length;  
      this.navWidth = `${navNum + 48}px`;  
      let num = 69 * this.list.length;  
      this.hotelWidth = `${num}px`;  
    }  
  },  
  props: {  
    list: {  
      type: Array,  
      default: () => {  
        return [];  
      }  
    }  
  }  
};  
</script>  
<style lang="stylus" scoped>  
.box {  
  position: relative;  
  width: 100vw;  
  height: auto;  

  .top {  
    display: flex;  
    justify-content: flex-start;  
    align-items: center;  
    width: 100%;  
    height: 35px;  
    margin-left: 15%;  
    background: #f6f6f6;  

    .tab {  
      display: flex;  
      justify-content: flex-start;  
      align-items: center;  
      height: 35px;  

      .item {  
        width: 70px;  
        height: 40px;  
        line-height: 40px;  
        text-align: center;  
        font-size: 0.8rem;  
      }  
    }  
  }  

  .left {  
    z-index: 999;  
    position: absolute;  
    left: 0;  
    top: 0;  
    width: 15%;  
    height: auto;  
    background: #f6f6f6;  

    .date {  
      width: 100%;  
      height: 60px;  
      line-height: 30px;  
      text-align: center;  
      font-size: 0.8rem;  
      margin-top: 10px;  
    }  
  }  

  .itemList {  
    display: flex;  
    justify-content: flex-start;  
    align-items: center;  
    height: auto;  
    box-shadow: inset 0px 5px 10px #ccc;  
    background: #f7f7f7;  
    margin-left: 15%;  

    .item {  
      width: 45px;  
      height: auto;  
      margin-left: 20px;  

      .sonList {  
        width: 100%;  
        height: 60px;  
        background: #fff;  
        margin-top: 10px;  

        .topSon {  
          width: 100%;  
          height: 50%;  
        }  

        .bottomSon {  
          width: 100%;  
          height: 50%;  
          margin-top: 1px;  
        }  

        .allSon {  
          width: 100%;  
          height: 100%;  
        }  

        // 规定颜色  
        .red {  
          background-image: linear-gradient(-45deg, #e86504, #d81b0d);  
        }  

        .purple {  
          background-image: linear-gradient(-45deg, #cd36fb, #6f0eec);  
        }  
      }  
    }  
  }  
}  
</style>

计算属性返回一个函数？不支持这种写法。即便是 Vue 支持当前这种写法，性能也是极低的。
不是很清楚你这个样式为什么搞的这么复杂，建议在绑定之前就处理好 data 里面的值，然后再用于绑定 class 以及逻辑判定。

动态绑定class时 我需要根据for循环中某个属性值去通过一个判断方法返回不同的class名字 返回结果可能有四个 为什么写法会报错呢

你这个问题解决了吗，我这边也是遇到类似的需求，动态赋予for里面子项不同的class