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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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横向重复区域显示二法
2008/09/25 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
初中政治教学反思
2014/01/17 职场文书
产品质量承诺书
2014/03/27 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
软件售后服务承诺书
2014/05/21 职场文书
森林病虫害防治方案
2014/06/02 职场文书
计划生育宣传标语
2014/06/21 职场文书
小学元宵节活动总结
2015/02/06 职场文书
二十年同学聚会感言
2015/07/30 职场文书
Python编写nmap扫描工具
2021/07/21 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL