vue-for循环嵌套操作示例


Posted in Javascript onJanuary 28, 2019

本文实例讲述了vue-for循环嵌套操作。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
  </style>
</head>
<body>
<table id="app" border="1" cellspacing="0" cellpadding="0">
<tr>
  <td>父循环第几次</td>
  <td>子循环第几次</td>
  <td>json的第几条数据</td>
  <td>数值</td></tr>
<tbody v-for="x,index in parentList">
<tr v-for="i,index2 in x.childList">
  <td>{{index}}</td>
  <td>{{index2}}</td>
  <td>{{i.index}}</td>
  <td>{{i.childName}}</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      parentList: [{
        childList: [{
          index: 1,
          childName: "第一个节点"
        }, {
          index: 2,
          childName: "第一个节点"
        }, {
          index: 3,
          childName: "第一个节点"
        }, {
          index: 4,
          childName: "第一个节点"
        }, {
          index: 5,
          childName: "第一个节点"
        }]
      },
        {
          childList: [{
            index: 6,
            childName: "第二个节点"
          }, {
            index: 7,
            childName: "第二个节点"
          }, {
            index: 8,
            childName: "第二个节点"
          }, {
            index: 9,
            childName: "第二个节点"
          }, {
            index: 10,
            childName: "第二个节点"
          }]
        },
        {
          childList: [{
            index: 11,
            childName: "第三个节点"
          }, {
            index: 12,
            childName: "第三个节点"
          }, {
            index: 13,
            childName: "第三个节点"
          }, {
            index: 14,
            childName: "第三个节点"
          }, {
            index: 15,
            childName: "第三个节点"
          }]
        }]
    }
  })
</script>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

vue-for循环嵌套操作示例

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

Javascript 相关文章推荐
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 #Javascript
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
JS实现的点击按钮图片上下滚动效果示例
Jan 28 #Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 #Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 #Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 #Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 #Javascript
You might like
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
小组合作学习反思
2014/02/18 职场文书
网络技术专业推荐信
2014/02/20 职场文书
经典促销广告词大全
2014/03/19 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
感谢信范文大全
2015/01/23 职场文书
团队拓展训练感想
2015/08/07 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js