【前端】如何将后端返回的数据遍历展示在前端页面

        前端小白单纯记录前端处理后端返回的结果展示在前端页面，直接拷贝了一个包含假数据的页面然后对后端数据进行展示。

实现效果：

 原始页面代码：

 <el-col class="mb40" :span="24" :sm="12" :md="12" :lg="8" :xl="8">
            <div class="item-center">
              <div class="gitee-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_person.png" alt="" />
                </div>
                <span class="item-value">2222</span>
                <span class="traffic-name sle">Gitee 访问量</span>
              </div>
              <div class="gitHub-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_team.png" alt="" />
                </div>
                <span class="item-value">2222</span>
                <span class="traffic-name sle">GitHub 访问量</span>
              </div>
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/today.png" alt="" />
                </div>
                <span class="item-value">4567</span>
                <span class="traffic-name sle">今日访问量</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/book_sum.png" alt="" />
                </div>
                <span class="item-value">1234</span>
                <span class="traffic-name sle">昨日访问量</span>
              </div>
            </div>
          </el-col>

如果您想要将后端传递的数据集合进行展示，可以使用Vue.js提供的列表渲染功能。

1.首先，您需要在Vue实例中定义集合数据，例如：

data() {
  return {
    items: [
      { title: '综合报表', value: 2222 },
      { title: '自助查询', value: 2222 },
      { title: '管理驾驶舱', value: 4567 },
      { title: '业务场景', value: 1234 },
      { title: '宽表模型', value: 1234 },
    ]
  }
}

2.然后，您可以使用v-for指令将集合数据绑定到HTML元素上进行渲染，例如：

<div class="item-center">
  <div v-for="(item, index) in items" :key="index" class="traffic-box">
    <div class="traffic-img">
      <img src="./images/book_sum.png" alt="" />
    </div>
    <span class="item-value">{{ item.value }}</span>
    <span class="traffic-name sle">{{ item.title }}</span>
  </div>
</div>

        这里使用了v-for指令，在items中遍历所有的元素，将数据进行渲染，与您给出的HTML代码相似。使用:key属性加上一个唯一的索引值可以帮助Vue识别每个元素。

参考这个上面的代码根据实际的需求就可以进行一个修改，最后结果就很棒！