vue v-for 循环嵌套的探索（一）

最新推荐文章于 2024-06-05 14:26:44 发布
最新推荐文章于 2024-06-05 14:26:44 发布
阅读量6k 收藏 1
点赞数
分类专栏： vue 文章标签： v-for循环嵌套的使用 json对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ColourfulTiger/article/details/80591747
版权
本文探讨了Vue.js中v-for循环嵌套的使用，通过一个实例展示了如何遍历json对象，实现多层循环以显示数据。文章详细解释了外层循环如何获取pdata.subtitle，以及如何通过subtitle获取title、smalltitle及其子属性one和two的值。最后，作者提到了循环体中index的用法，并表示将深入研究其含义。
摘要由CSDN通过智能技术生成

举一个简单的例子：

1、结构部分内容

（1）html 、css部分

<div class="Classfily" v-for="(subtitle) in pdata.subtitle">
<el-row>
<!--分类-->
 <el-col :span="24">
  <div class="grid-content bg-purple">
  <p class="red">{ {subtitle.title}}</p>
  <!--{ {subtitle.smalltitle}}-->
  <span v-for="smalltitle in subtitle.smalltitle">
  <span v-for="(one,index) in smalltitle.one" class="orange">
  { {one}}
  <!----{ {index}}-->

最低0.47元/天 解锁文章
ColourfulTiger
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
for循环表单一行放3个
tzyhys的专栏
01-10 1483
for(var i=0; i&lt;items.length; i++){     if(i==0||(i)%3==0){                 info.push('&lt;tr&gt;');     }                 info.push('&lt;td class="fws"&gt;&lt;a  onclick=viewProject("'+items[i].ID+...
vue2.0使用v-for循环制作多级嵌套菜单栏
08-27
主要介绍了vue2.0制作多级嵌套菜单栏,主要使用v-for循环生成一个多级嵌套菜单栏，这个方法应用非常广泛，需要的朋友可以参考下
vue中数组常用的六种循环方法、VUE中list的各种方法和运用
最新发布
zlfjavahome的专栏
06-05 1292
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some();
vue v-for嵌套
xiaojun201593的博客
08-19 2215
vue v-for循环嵌套 <div v-for="goods_list in goods_lists"> <div v-for="good in goods_list.goods"> <img class="menu_goods_img" :src="good.src"> <div> ...
vue v-for嵌套循环
Bin_9527的博客
03-29 3435
@[TOC]v-for的嵌套循环 v-for 列表循环例子 v-for解释 用v-for指令根据一组数组的选项列表进行渲染，**v-for**指令需要使用**item in items**， item是对象别名，items是源数据数组（名）。比如item为student,那么我们提取的JSON数据 可能包括student的多个属性。如名字,学号，性别等等。 v-for例子 官网例子： *...
vue中v-for嵌套循环
热门推荐
likeuyq的博客
04-08 2万+
vue中对于层级比较多的数据结构可能会使用到v-for的嵌套循环,话不多说,上代码.
vue中使用v-for实现两次嵌套循环，判断某子元素是否显示，进行复杂表单校验
铁锤妹妹的博客
07-12 5920
有以下一个使用场景，名称111、名称222、名称333，是放在一个大数组里的，然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组，子数组再通过第二次for循环展示出来。当我们选择发放方式的时候，符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。
vue2-course:Vue2课程的课程笔记和代码
04-27
4. **指令与过滤器**：Vue提供了多种内置指令，如v-if/v-else、v-for、v-bind和v-on，用于条件渲染、循环、属性绑定和事件处理。过滤器可以用于格式化输出数据，例如日期格式化或字符串转换。 5. **组件化**：组件...
一个VUE项目
11-14
例如，`v-bind`用于动态绑定属性，`v-if`和`v-for`用于条件渲染和循环，以及`v-on`用于监听事件。 5. **数据绑定**： Vue采用双向数据绑定，使得数据和视图保持同步。数据模型存储在Vue实例的`data`选项中，模板中...
vue2（跟着bilibili黑马程序员做的）
11-01
2. **模板语法**：Vue的模板语法是HTML的扩展，支持指令（如`v-if`, `v-for`, `v-bind`, `v-on`等）和插值表达式，用于动态渲染内容和处理条件、循环逻辑。 3. **组件化开发**：Vue的核心在于组件，它允许将UI拆...
vue-2.5.17-beta.0-analysis:vue原始码阅读笔记
03-23
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪创建并维护。2.5.17-beta.0是Vue的一个版本，尽管它带有"beta...因此，"vue-2.5.17-beta.0-analysis"这个项目为学习和探索Vue的内部机制提供了一个宝贵的资源。
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中多层数据结构,用v-for嵌套循环
weixin_40030173的博客
02-14 2852
多层数据结构,`我们可以考虑使用v-for进行嵌套循环 <ul> <li v-for="(item,index) in tableData" :key="index" > 0{{item.name}} <ul> <li v-for="(item1,index1) in tableData[index].items" :...
Vue嵌套循环渲染与条件渲染--v-for|v-if
随便写写
12-16 3706
分析接口返回数据结构 data对象下有9个键值对 值 分别有数组类型,Object类,和null 数组类型Array下,存有若干个对象,每个对象有若干个值 现 遍历所有键值 , 并将null替换为"暂无" 大致效果 实例代码 <div id="app"> <div v-for="(item,key) in data_" :key="key"> <!-- <div class="key">第一层:{{key}}===={
vue for嵌套循环
李小狮
05-26 1878
<template> <div> <!-- :key="item.id" 显示第几个 :value="item.value" 显示的值 :label="item.label" 传给后台的值 --> <div v-for="item in lists" :key="item.id" :value="item.value" :label="item.
vue嵌套循环数组，选中其中某一项，添加选中的样式
null_NaN的博客
03-27 1555
效果图： 拓展：在一个组件实例中，只有在data里初始化的数据才是响应的，Vue2不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。 数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测 push()，pop()，shift()，unshift()，splice()，sort()，reverse()可被vue检测到 filter(), concat(), sl
Vue 项目实战三 权限管理和用户列表 递归 三级for循环
m0_55170432的博客
05-26 871
!!树状结构 递归 调用获取ID!!! 重点！ console.log(val)外界传递进来的参数,就是当前角色自带的权限 现在就是要从val里面拿出来我们所有ID组成的数组 因为这个数据的格式,是每个对象都有children,只要到了一个对象没有children,那么证明这个层级就结束了,就可以当作递归的结束条件 // 设置一个递归函数,通过递归的形式，获取角色下所有三级权限的id，并保持在defKeys中 getLeafKeys(node, arr) { if (!n
vue——v-for动态循环的div，一排3个，padding-right为120，让最后一个padding-right设为0
HoShining日志
11-07 2762
处理前： （主要看ABC三部分，现在要做的是去掉C部分的padding值） 处理后： 开始处理： 定义div <div class="introduction_inner-g-item " v-for="(item,index) in useType" :key="index" :class="(index + 1) % useType.length == 0 ?'noright':'margin-right-120'"> &lt
vue中循环表格数据给最后一行添加样式
The One Who's at the Front
01-07 1786
最近做项目遇到一个问题：循环表格给最后一行重新设置样式问题。???????????? 解决方法 动态添加class名设置样式（:class="{'special-style':idx===item.data.length - 1}"）。 代码 <table v-for="item in items"> <tr v-for="(child, idx) in item.data" :key="idx" :class="{'special-style':idx===item.dat
vue v-for 循环 循环结果并排div
07-22
你可以使用 Vue.js 的 v-for 指令来循环一个数组或对象，并使用 CSS 的 flexbox 布局来将循环结果并排显示。 下面是一个简单的示例代码，展示了如何使用 v-for 循环并排显示 div 元素： ```html <div v-for=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值