How to traverse the data returned by the backend and display it on the frontend page

        The front-end Xiaobai simply records the results returned by the front-end processing and the back-end is displayed on the front-end page, directly copies a page containing fake data and then displays the back-end data.

Realize the effect:

 Original page code:

 <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>

If you want to display the data collection passed by the backend, you can use the list rendering function provided by Vue.js.

1. First, you need to define the collection data in the Vue instance, for example:

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

2. Then, you can use the v-for directive to bind the collection data to HTML elements for rendering, for example:

<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>

The v-for command         is used here to traverse all the elements in items and render the data, which is similar to the HTML code you gave. Using the :key attribute with a unique index value helps Vue identify each element.

Refer to the code above to make a modification according to actual needs, and the final result is great!