Vue遍历数据_根据返回的数据数组长度生成多个div中渲染指定数

首先对拿到的数据进行处理，把拿到的数组分割成数组嵌套数组嵌套对象，如下图：

实现思路：对原数据数组进行切割,这里以两条为例

具体代码实现：传入原数组和和要切割的条数返回切割后的数组：

    sliceArray (array, size) {
      var result = []
      for (let i = 0; i < Math.ceil(array.length / size); i++) {
        let start = i * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      this.data2 = result
      console.log(this.data2, '**************************')
      return result
    },

调用：

  mounted () {
    this.sliceArray(this.data1, this.pageSize)
  },

然后就可以进行遍历了

参考代码如下：

      <div
        v-for="(item,index) in data2"
        v-show="showFlag"
        :key="index"
        class="main"
      >
        <div
          v-for="(item2,index) of item"
          :key="index"
          class="childShow">
        </div>
        <img   :src="item2.cameraUrl" alt="" />
     </div>

参考：https://blog.csdn.net/weixin_41932747/article/details/84850008