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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
详解vue路由
Aug 05 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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实现仿写CodeIgniter的购物车类
2015/07/29 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python OS模块实例详解
2019/04/15 Python
详解用python写一个抽奖程序
2019/05/10 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
测试工程师职业规划书
2014/02/06 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2014年政协工作总结
2014/12/09 职场文书
黄山导游词
2015/01/31 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle