Vue 列表渲染 v-for循环

王小婷

发布于 2019-05-31 10:14:46

1.5K0

发布于 2019-05-31 10:14:46

Element UI手册：https://cloud.tencent.com/developer/doc/1270 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element

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数据渲染在前端界面，形成循环列表。