vue多次循环操作示例

本文实例讲述了某视频剪辑软件多次循环操作。分享给大家供大家参考，具体如下：

需求：有以下一个数组，想将其对象里的信息展示出来，而且还要把对象下面的数组的具体信息也展示出来迭代可以实现循环，但是能否再下一级进行渲染呢？答案是可以的。

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':测试支付宝1 '，' price': '0.0100 '，' sale_num': '200' }，{ 'program_id': '2 '，' reserve': '4895 '，' 程序名' : '阿萨打算，' 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:513:28 '，' is _ handsel ' : ' 2 '，' atten_del': ' '，' up_time': null，' obj _ phone ' 333333330阿萨打算、“价格”:“0.0200”、“sale _ num”: null }、{“program _ id”:“3”、“reserve”:“10”、“program _ name”:测试多个程序方案赠送1 ','价格： '0.0000 '，' sale_num': null }] }]HTML部分：

div id='app' div v-for='列表中的项目p { { item }。scheme _ sn } }/p p v-for=' item。程序中的项目'程序id { { items }。program _ id } }/p p v-for=' item。程序中的项目'程序名称{ { items。program _ name } }/p/div/div先循环大的目录然后再用项目。程序中的项目去循环对象里面的数组

完整测试示例：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue多次循环/title style * { margin : 0；padd : 0；列表样式：无；}/style/head dydiv id=' app ' div v-for='列表中的项目p { { item }。scheme _ sn } }/p p v-for=' item。程序中的项目'程序id { { items }。program _ id } }/p p v-for=' item。程序中的项目'程序名称{ { items。program _ name } }/p/div/div/body脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js '/script const app=new Vue({ El : ' # app '，数据： { list :[{ ' scheme _ id ' : ' 1 '，' scheme _ sn ' : ' 201803111测试支付宝，' 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':测试支付宝1 '，'价格' : '0.0100 '，' sale_num': 200' }，{ 'program_id': '2 '，' reserve': '4895 '， 程序名' : '阿萨打算，' 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':阿萨打算、“价格”:“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://工具。 JB 51。net/code/HTMljsrun测试上述代码，可得如下运行效果：

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