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

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

实现效果：

 原始页面代码：

 
            

              

                

                  
                
                2222
                Gitee 访问量
              
              

                

                  
                
                2222
                GitHub 访问量
              
              

                

                  
                
                4567
                今日访问量
              
              

                

                  
                
                1234
                昨日访问量
              
            
          

如果您想要将后端传递的数据集合进行展示，可以使用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元素上进行渲染，例如：

  

    

      
    
    {{ item.value }}
    {{ item.title }}
  

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

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