快捷導(dǎo)航

vue多次循環(huán)操作示例

更新時間：2019年02月08日 11:34:50 作者：cofecode

這篇文章主要介紹了vue多次循環(huán)操作,結(jié)合實例形式分析了vue.js針對json嵌套數(shù)據(jù)的多次循環(huán)讀取操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了vue多次循環(huán)操作。分享給大家供大家參考，具體如下：

需求：有以下一個數(shù)組，想將其對象里的信息展示出來，而且還要把對象下面的數(shù)組的具體信息也展示出來。v-for可以實現(xiàn)循環(huán)，但是能否再下一級進(jìn)行渲染呢？答案是可以的。

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": "阿散發(fā)撒",
    "type": "",
    "field_id": "0",
    "user_id": "5",
    "mother_id": "0",
    "content": "阿斯達(dá)",
    "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>

先循環(huán)大的list 然后再用items in item.programs 去循環(huán)對象里面的數(shù)組

完整測試示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.fzitv.net vue多次循環(huán)</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": "阿散發(fā)撒",
    "type": "",
    "field_id": "0",
    "user_id": "5",
    "mother_id": "0",
    "content": "阿斯達(dá)",
    "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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運(yùn)行效果：