Vue 列表渲染 v-for循环

简介: Vue 列表渲染 v-for循环

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

相关文章
|
8月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
82 1
vue学习第7章(循环)
|
9月前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`&lt;li v-for=&quot;item in items&quot; @click=&quot;handleClick(item)&quot;&gt;{{ item }}&lt;/li&gt;`。
|
9月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
346 6
|
9月前
|
JavaScript 算法 前端开发
深入剖析Vue中v-for的使用及index作为key的弊端
深入剖析Vue中v-for的使用及index作为key的弊端
251 2
|
9月前
|
JavaScript 算法 前端开发
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
151 0
|
1月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
199 0
|
1月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
371 4
|
2月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
241 77
|
1月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
167 17