JavaScript
搜索
分类

vue多次循环操作示例

作者：cofecode 时间：2024-05-28 15:48:20　

本文实例讲述了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>www.aspxhome.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.aspxhome.com/code/HtmlJsRun测试上述代码，可得如下运行效果：

vue多次循环操作示例

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

来源：https://blog.csdn.net/cofecode/article/details/80003837

标签：vue,多次循环
0
投稿

猜你喜欢

  • 浅析DW4中的站点管理

    2007-02-03 11:40:00

  • 举例讲解Python设计模式编程中的访问者与观察者模式

    2021-06-10 06:38:16

  • 文字适度阅读的宽度或者字数

    2007-10-26 07:31:00

  • 详解Open Folder as PyCharm Project怎么添加的方法

    2021-06-25 05:56:53

  • Python正则表达式介绍

    2023-05-29 01:32:58

  • VUEJS实战之构建基础并渲染出列表（1）

    2024-05-29 22:14:46

  • 使用 Python 遍历目录树的方法

    2021-09-21 22:19:32

  • Python练习之ORM框架

    2021-03-10 11:34:20

  • 使用cmd命令行窗口操作SqlServer的方法

    2024-01-17 06:13:13

  • python爬虫看看虎牙女主播中谁最“顶”步骤详解

    2022-03-31 09:30:33

  • ASP获取当前页面URL地址（带参数）的方法

    2010-01-14 19:40:00

  • python异步存储数据详解

    2023-08-14 09:05:44

  • MySQL范围查询优化的场景实例详解

    2024-01-17 01:11:12

  • pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)

    2023-10-13 11:55:44

  • python 中pyqt5 树节点点击实现多窗口切换问题

    2021-07-28 06:19:39

  • Django实现全文检索的方法(支持中文)

    2023-12-04 14:35:13

  • ASP XML编程objXML.async = False

    2011-04-21 10:55:00

  • 一个简单的ASP计数器代码

    2010-04-24 15:49:00

  • 分析python服务器拒绝服务攻击代码

    2021-07-21 20:47:29

  • SQL Server 2005日志文件损坏的处理方法

    2008-12-02 14:36:00
    • asp之家 网络编程 m.aspxhome.com