产品图可以往下看，效果如图：
效果图
源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数组遍历</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<center>
<div class="my-top">
<div v-for="(item,index) in result" :key="index" class="ceshi" >
<span v-if="item.length != 0">{{index}}</span>
<div v-for="(items,index) in item">{{items.title}}</div>
</div>
</div>
</center>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
result: {
"A": [
{
"id": "1142",
"title": "阿斯顿马丁",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "f26b9191-3009-4c87-98f6-a735b9188055.jpg",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1141",
"title": "奥迪",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "奥迪.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
}
],
"B": [
{
"id": "1132",
"title": "比亚迪",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "比亚迪.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1131",
"title": "标致",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "标致.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
],
"C": [],
"D": [
{
"id": "1127",
"title": "道奇",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "道奇.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1128",
"title": "大众",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "大众.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1123",
"title": "东风风神",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "东风风神.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1126",
"title": "东南汽车",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "东南汽车.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
}
],
},
}
})
</script>
<style type="text/css">
.my-top{
width: 60%;
border: 1px solid red;
}
.ceshi{
float: left;
width: 99%;
/*border: 1px solid #ccc;*/
}
.ceshi span{
width: 99%;
float: left;
/*border: 1px solid #ccc;*/
}
.ceshi div{
width: 30%;
float: left;
border: 1px solid green;
margin: 1%;
}
</style>
</html>
如图，做一个这样一个东西：
此功能
接口给前端返回了这样得一个结构，前端告诉我这是什么格式得没见过，没法遍历，唉，只好自己写一手打个样~~~
{
"success": true,
"message": "操作成功！",
"code": 200,
"result": {
"A": [
{
"id": "1142",
"title": "阿斯顿马丁",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "f26b9191-3009-4c87-98f6-a735b9188055.jpg",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1141",
"title": "奥迪",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "奥迪.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
}
],
"B": [
{
"id": "1132",
"title": "比亚迪",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "比亚迪.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1131",
"title": "标致",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "标致.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1133",
"title": "本田",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "本田.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
}
],
"C": [],
"D": [
{
"id": "1127",
"title": "道奇",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "道奇.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1128",
"title": "大众",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "大众.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1123",
"title": "东风风神",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "东风风神.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
},
{
"id": "1126",
"title": "东南汽车",
"deleteFlag": "0",
"fid": "",
"enable": "1",
"creattime": "2019-12-24",
"img": "东南汽车.png",
"pid": "0",
"hasChild": "1",
"createTime": "2019-12-24"
}
],
"E": [],
},
"timestamp": 1660111559584
}
虽然我这样写了，但是接口还是给返回了这样得格式
arr:[
{
"apple":
[
{
"color":"red",
"num":"265"
}
]
},
{
"banana":
[
{
"color":"yellow",
"num":"366"
}
]
},
{
"pear":
[
{
"color":"green",
"num":"896"
}
]
}
],
此文仅推给小白~~~
网友评论