vue多次循环操作示例


Posted in Javascript onFebruary 08, 2019

本文实例讲述了vue多次循环操作。分享给大家供大家参考,具体如下:

需求:有以下一个数组,想将其对象里的信息展示出来,而且还要把对象下面的数组的具体信息也展示出来。v-for可以实现循环,但是能否再下一级进行渲染呢?答案是可以的。

list: [{
    "scheme_id": "1",
    "scheme_sn": "2018031416442200001",
    "scheme_name": "测试支付宝",
    "type": "",
    "field_id": "0",
    "user_id": "5",
    "mother_id": "0",
    "content": "测试支付宝",
    "program_id": "1,2",
    "status": "1",
    "range": "1",
    "obj": "5",
    "add_time": "2018-03-14 16:44:22",
    "is_handsel": "2",
    "atten_del": "",
    "up_time": null,
    "obj_phone": "13521121232",
    "programs": [{
      "program_id": "1",
      "reserve": "99701",
      "program_name": "测试支付宝1",
      "price": "0.0100",
      "sale_num": "200"
    }, {
      "program_id": "2",
      "reserve": "4895",
      "program_name": "阿萨打算",
      "price": "0.0200",
      "sale_num": null
    }]
  }, {
    "scheme_id": "2",
    "scheme_sn": "2018031416512800002",
    "scheme_name": "阿散发撒",
    "type": "",
    "field_id": "0",
    "user_id": "5",
    "mother_id": "0",
    "content": "阿斯达",
    "program_id": "2,3",
    "status": "2",
    "range": "1",
    "obj": "5",
    "add_time": "2018-03-14 16:51:28",
    "is_handsel": "2",
    "atten_del": "",
    "up_time": null,
    "obj_phone": "13521121232",
    "programs": [{
      "program_id": "2",
      "reserve": "4895",
      "program_name": "阿萨打算",
      "price": "0.0200",
      "sale_num": null
    }, {
      "program_id": "3",
      "reserve": "10",
      "program_name": "测试多个程序方案赠送1",
      "price": "0.0000",
      "sale_num": null
    }]
  }]

HTML部分:

<div id="app">
    <div v-for ="item in list">
      <p>{{item.scheme_sn}}</p>
      <p v-for="items in item.programs">程序id {{items.program_id}}</p>
      <p v-for="items in item.programs">程序名称 {{items.program_name}}</p>
    </div>
</div>

先循环大的list 然后再用items in item.programs 去循环对象里面的数组

完整测试示例:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3water.com vue多次循环</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
 </style>
</head>
<body>
<div id="app">
    <div v-for ="item in list">
      <p>{{item.scheme_sn}}</p>
      <p v-for="items in item.programs">程序id {{items.program_id}}</p>
      <p v-for="items in item.programs">程序名称 {{items.program_name}}</p>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
 const app=new Vue({
  el:"#app",
  data:{
   list: [{
    "scheme_id": "1",
    "scheme_sn": "2018031416442200001",
    "scheme_name": "测试支付宝",
    "type": "",
    "field_id": "0",
    "user_id": "5",
    "mother_id": "0",
    "content": "测试支付宝",
    "program_id": "1,2",
    "status": "1",
    "range": "1",
    "obj": "5",
    "add_time": "2018-03-14 16:44:22",
    "is_handsel": "2",
    "atten_del": "",
    "up_time": null,
    "obj_phone": "13521121232",
    "programs": [{
      "program_id": "1",
      "reserve": "99701",
      "program_name": "测试支付宝1",
      "price": "0.0100",
      "sale_num": "200"
    }, {
      "program_id": "2",
      "reserve": "4895",
      "program_name": "阿萨打算",
      "price": "0.0200",
      "sale_num": null
    }]
  }, {
    "scheme_id": "2",
    "scheme_sn": "2018031416512800002",
    "scheme_name": "阿散发撒",
    "type": "",
    "field_id": "0",
    "user_id": "5",
    "mother_id": "0",
    "content": "阿斯达",
    "program_id": "2,3",
    "status": "2",
    "range": "1",
    "obj": "5",
    "add_time": "2018-03-14 16:51:28",
    "is_handsel": "2",
    "atten_del": "",
    "up_time": null,
    "obj_phone": "13521121232",
    "programs": [{
      "program_id": "2",
      "reserve": "4895",
      "program_name": "阿萨打算",
      "price": "0.0200",
      "sale_num": null
    }, {
      "program_id": "3",
      "reserve": "10",
      "program_name": "测试多个程序方案赠送1",
      "price": "0.0000",
      "sale_num": null
    }]
  }]
  }
 })
</script>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

vue多次循环操作示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
关于javascript DOM事件模型的两件事
Jul 22 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
jquery常用的12个小功能
Jul 22 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
JS中常用的消息框总结
Feb 24 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 #Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 #Javascript
Vue从TodoList中学父子组件通信
Feb 05 #Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 #Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 #Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 #Javascript
小程序页面动态配置实现方法
Feb 05 #Javascript
You might like
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
两款万能的php分页类
2015/11/12 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python游戏开发的五个案例分享
2020/03/09 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
社团招新策划书
2014/02/04 职场文书
仓库规划计划书
2014/04/28 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
安全标语口号
2014/06/09 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
检讨书范文2000字
2015/01/28 职场文书
湘江北去观后感
2015/06/15 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书