vue二维数组循环嵌套方式 循环数组、循环嵌套数组


Posted in Vue.js onApril 24, 2022

二维数组循环嵌套方式

<div class="box">
  <div class="color">
     <div>蓝色/尺码</div>
  </div>
  //这是简单的布局
.box{
    border: 1px solid red;
    display: flex;
  
}
.color{
    display: flex;
}
.color div{
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid blue;
}
//样式代码
//在data()创建一个简单的二维数组
//一维数组 名字:[] 二维数组  名字:[ { 名字:[] } ] 数组简单构成
  data() {
    return {
        // sku二维数据
        skuData: [
          {
            skuTitle: '颜色',
            skuChild: [
              { skuTitle: '红色', sku: 100, skuId: 1 },
              { skuTitle: '蓝色', sku: 100, skuId: 2 },
            ]
          },
          {
            skuTitle: '尺码',
            skuChild: [
              { skuTitle: 'S', sku: 100, skuId: 3 },
              { skuTitle: 'M', sku: 100, skuId: 4 },
              { skuTitle: 'L', sku: 100, skuId: 5 },
            ]
          }
        ],
         
    };
  },
//完成两层循环的布局
  <div v-for="(item,index) in skuData " :key="index" class="box">
    <div v-for="(item_,index_) in item.skuChild" :key ="index_" class="color">
      <div>{{item_.skuTitle}}</div>
    </div>
  </div>
//这是循环取出第一层数组,保存在item里面
 <div v-for="(item,index) in skuData " :key="index" class="box"></div>
 //这是循环出第二层数组,注意要在item里面取出
 <div v-for="(item_,index_) in item.skuChild" :key ="index_" class="color"></div>
 //两者循环嵌套就完成了

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

vue循环数组、循环嵌套数组v-for

利用Vue循环输出标签

先在"script"中写入一个数组

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

之后在上方"div"标签中做循环输出,使用"v-for"

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

这里的"v-for"标签中,"item"单个数组项,可以随意替换所需要的名称,"list"是"script"中传递来的数组。

整句for语句可以理解为“list”中的"item"单个数组值做循环,当有循环时做添加输出标签。

标签内的"{{item}}"则是将单个数组内容显示在页面上。

效果如下图所示:

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

这里的数据除了可以将数组内容显示在前端页面,也可以将数组序列号显示显示出来

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

加上key就可以将数组的序列输出

显示效果如下:

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

前端页面输出循环嵌套数组

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

上图数组内容为嵌套形式,分为大标题小标题

之后再html部分编辑循环输出

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

第一个"ul>li"循环输出大标题,第二个再for语句中,直接查找item下的news子数组,之后,依次输出

输出内容为子数组的"title"

vue二维数组循环嵌套方式 循环数组、循环嵌套数组

这样就完成了数组嵌套循环


Tags in this post...

Vue.js 相关文章推荐
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
vue动态绑定style样式
Apr 20 #Vue.js
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
python中正则表达式的使用详解
2014/10/17 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python 字典的打印实现
2019/09/26 Python
python中pyplot基础图标函数整理
2020/11/10 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
廉洁校园实施方案
2014/05/25 职场文书
病假证明模板
2015/06/19 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书