Vue开发案例教程-模块7 遍历数据

Vue开发案例教程模块07·遍历数据VUEDEVELOPMENTCOURSE本章学习目标掌握核心指令掌握Vue框架中`v-for`模板语法的使用，理解其核心参数与循环逻辑。实现数据展示能够运用`v-for`指令，实现电商外卖系统案例中相关页面的数据遍历与列表展示功能。树立正确观念在技术学习之外，树立正确的消费观念，坚持理性消费原则，做到不盲目攀比、不超前消费。综合学习收获将技术实践与生活理念相结合，不仅夯实Vue开发基础，更培养良好的自我管理与价值观。本章内容概览核心概念解析深入理解v-for指令及其三种核心用法，掌握数据遍历的基础理论。动手实践步骤通过详细的步骤引导，从零开始实现列表数据的遍历渲染，并进行综合实战演练。知识总结与拓展系统总结本章核心知识点，并提供针对性的拓展练习，帮助大家巩固与深化所学内容。PART01核心概念解析CORECONCEPTSANALYSIS核心概念：v-for指令▍基本定义`v-for`是Vue中用于实现循环遍历数据的模板语法，它可以根据传入的数据源（数字、数组、对象），高效地重复渲染一个元素或组件。循环指定次数语法：`v-for="iin10"`

基于数字直接重复渲染指定次数的元素，索引从1开始。遍历数组数据语法：`v-for="iteminarray"`

遍历数组中的每一项，将数据动态映射到视图中，是最常用的列表渲染方式。遍历对象键值语法：`v-for="(v,k)inobj"`

同时获取对象的键（Key）和值（Value），常用于展示结构化的配置数据。💡核心总结：`v-for`是Vue实现动态列表渲染的核心基础，没有它就无法高效展示列表数据。核心概念：遍历类型数组遍历通过v-for="元素in数组"语法，将数组中的每个元素依次渲染到页面DOM中。支持获取当前索引：(item,index)inarray最基础也是最常用的遍历方式，适用于列表数据的渲染。JSON对象遍历📊仅遍历值

v-for="valueinobject"直接获取属性值🔑遍历键值对

v-for="(val,key)inobject"获取键与值🔢带索引遍历

v-for="(val,key,i)inobject"包含索引组件化数据遍历🎯核心逻辑

结合Vue组件化开发模式，将v-for指令与自定义组件深度结合，实现页面模块的动态数据渲染。💡应用场景

在复杂应用中，将列表数据映射为独立的功能组件，实现数据与视图的解耦。PART02动手实践步骤PRACTICESTEPS步骤一：v-for基础用法循环指定次数直接使用`v-for="iinn"`语法，即可快速实现固定次数的循环渲染，`i`代表当前的循环索引。<divv-for="iin10">

第{{i}}次循环

</div>遍历数组元素使用`v-for="iteminarray"`遍历数组，`item`代表数组中当前遍历到的具体元素值，直接用于渲染。<divv-for="vincityList">

当前城市：{{v}}

</div>遍历JSON对象使用`(val,key,idx)`解构，分别对应对象的值、键和索引，可同时获取对象的完整信息进行渲染。<divv-for="(v,k,i)inuser">

{{i}}:{{k}}-{{v}}

</div>步骤一：商品列表页实现分类列表遍历遍历商品分类数组，利用v-for生成菜单列表；结合:class动态绑定激活样式，并使用过滤器对过长的分类名称进行截取格式化。<liv-for="(v,i)ingoods":class="{'active':idx==i}">

{{|truncate(6)}}

</li>核心逻辑：遍历分类数据，实现动态菜单与交互反馈。商品信息列表遍历监听分类切换事件，遍历当前选中分类下的商品数组。通过数据绑定动态渲染商品图片、名称等信息，构建完整的商品展示列表。<divclass="item"v-for="vingoodsList">

<img:src="v.icon"alt="goods"/>

<divclass="name">{{}}</div>

</div>核心逻辑：响应式数据驱动视图，动态生成商品列表DOM。步骤二：商品详情页实现01.传递商品索引当用户点击商品列表中的某一项时，通过事件回调函数将该商品的索引（Index）传递给详情页组件，以便准确获取并展示对应商品的详细数据。showGoodsInfo(menuIndex,index){this.$root.$refs.goodsinfo.showDetails(menuIndex,index);}02.评论数据动态遍历在详情页中，利用Vue的v-for指令循环遍历当前商品的评论数组（ratings），将用户的昵称、评论内容等信息动态渲染到页面视图中。<!--遍历评论数组--><divv-for="vinratings":key="v.id"><div>用户:{{v.username}}</div><div>内容:{{v.text}}</div></div>步骤三：评论页实现我们来实现评论列表的遍历与筛选，结合v-for指令与Axios数据请求，动态渲染用户评价信息。核心实现思路1.数据获取：在mounted生命周期钩子中，使用Axios异步请求本地JSON数据文件。2.列表渲染：利用v-for指令遍历ratings数组，循环生成每一条评论的DOM结构。3.条件展示：使用v-show指令，根据推荐商品列表长度动态控制元素的显示与隐藏。HTML模板结构定义<divclass="ratings-item"v-for="vinratings"><img:src="v.avatar"/><div>{{v.username}}|{{v.rateTime|formatTime}}</div><divv-show="v.recommend.length>0"><divv-for="vvinv.recommend">{{vv}}</div></div></div>Vue组件数据请求逻辑mounted(){axios.get("data.json").then((response)=>{this.ratings=response.data.ratings;});}步骤四：商店详情页实现01/获取数据(DataFetching)在mounted生命周期钩子中，通过Axios异步请求data.json，将返回的商家实景(pics)和信息(infos)挂载到实例。mounted(){axios.get("data.json").then(res=>{

this.pics=res.data.seller.pics;s=s;});}02/模板遍历渲染(Rendering)在Vue模板中使用v-for指令，遍历根实例中的数据，动态渲染出商家服务、实景照片列表与详细信息文本。<divv-for="vin$root.supports">{{v.desc}}</div>

<imgv-for="vin$root.pics":src="v"/>💡核心技巧：利用$root访问根实例共享数据，实现跨组件的数据传递与复用，简化层级调用。数据流向与渲染逻辑Step1.异步请求数据

AxiosGET请求->获取JSON格式的商家数据Step2.数据挂载与共享

赋值给this/$root->数据响应式更新Step3.声明式视图渲染

v-for指令遍历->动态生成DOM元素展示内容响应式原理：数据驱动视图自动更新步骤五：商家详情页优惠信息优惠信息遍历遍历商家优惠信息数组，利用v-for指令循环渲染，并根据优惠类型动态加载对应的图标资源。<divv-for="vin$root.supports"><img:src="`images/type${v.type}.png`"/>{{v.description}}</div>动画效果实现结合Vue的<transition>组件，为商家详情页的显示和隐藏逻辑添加淡入淡出的过渡动画，提升交互体验。<transitionname="store-fade"><divclass="store"v-show="isShowStore"><!--商家详情内容--></div></transition>开发优化提示在循环渲染时建议为每个项添加唯一的key属性；同时将动画类名进行复用，以保持代码的可维护性。//推荐实践：v-for="(item,i)inlist":key="i"//定义全局过渡样式.store-fade-enter-active{...}PART03知识总结与拓展CHAPTERSUMMARY&EXPANSION知识小结核心用法•v-for指令支持三种核心用法：1.直接循环指定次数；2.遍历JavaScript数组；3.遍历JSON对象的键值对。结合使用•与条件渲染结合：配合v-show/v-if实现列表项的条件展示。•与事件系统结合：绑定点击等事件，结合过滤器实现复杂交互。数据驱动•后端数据交互：使用axios库异步获取外部JSON数据。•动态视图更新：将获取的数据赋值给数组，配合v-for快速渲染列表。扩展练习拓展01/遍历旅行日记📝核心任务创建`header`、`footer`、`info`组件，实现旅行日记大分类、小分类和内容的遍历