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數據渲染在前端界面，造成循環列表。

---

原文做者：祈澈姑娘