Vue 列表渲染 v-for循环

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


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,对于博客上面有不会的问题,欢迎加入编程微刊qq群:260352626。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券