Vue 列表渲染 v-for循环

Element UI手册：cloud.tencent.com/developer/d… 中文文档：element-cn.eleme.io/#/zh-CN github地址：github.com/ElemeFE/ele…

---

1：新建一个json文件 list.json

list.json

[  
        {  
            "id": 0,  
            "name": "王小婷",  
            "address": "徐家汇"  
        },  
        {  
            "id": 1,  
            "name": "小星星",  
            "address": "秀沿路"  
        },  
        {  
            "id": 2,  
            "name": "王小婷",  
            "address": "迪斯尼"  
        },  
        {  
            "id": 3,  
            "name": "李俊飞",  
            "address": "徐家汇"  
        },  
        {  
            "id": 4,  
            "name": "小金龙",  
            "address": "东方体育中心"  
        },  
        {  
            "id": 5,  
            "name": "小星星",  
            "address": "漕宝路"  
        },  
        {  
            "id": 6,  
            "name": "小潘子",  
            "address": "合川路"  
        },  
        {  
            "id": 7,  
            "name": "小婷婷",  
            "address": "龙漕路"  
        },  
        {  
            "id": 8,  
            "name": "小兔子",  
            "address": "松江大学城"  
        },  
        {  
            "id": 9,  
            "name": "王对对",  
            "address": "龙耀路"  
        },  
        {  
            "id": 10,  
            "name": "王胖胖",  
            "address": "三林东"  
        }
        
    ]  
复制代码

2：在build目录下找到webpack.dev.conf.js文件，编写如下代码

const list = require('../mock/list.json') 

 app.get('/api/list', (req, res) => {
  res.json(list)
 })
复制代码

3:浏览器输入http://localhost:8080/api/list#/

成功看到模拟数据

4:页面代码请求json数据 test.vue

<template>
	<div>
		<el-card class="box-card" v-for="item in itemList">
			<div slot="header" class="clearfix">
				<span>{{item.id}}</span>
				<el-button style="float: right; padding: 3px 0" type="text">{{item.name}}</el-button>
			</div>
			<div v-for="o in 2" :key="o" class="text item">
				{{'列表内容 ' + item.address }}
			</div>
		</el-card>
	</div>
</template>

<style>
	.text {
		font-size: 14px;
	}
	
	.item {
		margin-bottom: 18px;
	}
	
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}

</style>

<script>
	import axios from "axios";
	export default {
		name: "app",
		data() {
			return {
				itemList: []
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				axios.get('http://localhost:8080/api/list').then(response => {
					console.log(response.data);

					this.itemList = response.data;
				}, response => {
					console.log("error");
				});
			}
		}
	}
</script>
复制代码

5：效果以下,请求过来的json数据渲染在前端界面，造成循环列表。

---

原文做者：祈澈姑娘