如何优化大规模v-if?策略模式

40 阅读1分钟

当大量结构相似的元素,数据存在映射关系时,可以通过对象的属性名查询对应数据
举个例子

map: {
      1: {
        status: '审核中',
        className: 'info'
      },
      2: {
        status: '审核通过',
        className: 'success'
      },
      3: {
        status: '审核失败',
        className: 'fail'
      }
    }
    
   // 这里的item是循环请求的来的数据获取的,里面有个status属性,值为 1/2/3, 分别代表不同状态
   <text class="tag {{map[item.status].className}}">{{map[item.status].status}}</text>