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 的 v-model用法实例
Nov 23 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python上下文管理器和with块详解
2017/09/09 Python
Python版名片管理系统
2018/11/30 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
蔻驰英国官网:COACH英国
2020/07/19 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
护士演讲稿范文
2014/01/05 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
跳槽求职信范文
2014/05/26 职场文书
公司员工手册范本
2015/05/14 职场文书
团组织推荐意见
2015/06/05 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP