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中的对象和数组的应用技巧
Jan 07 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
大学三年计划书范文
2014/04/30 职场文书
办公室岗位职责
2015/02/04 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
vue3中provide && inject的使用
2021/07/01 Vue.js
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL