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 相关文章推荐
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
js数组常用最重要的方法
Feb 04 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
使用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
如何做到多笔资料的同步
2006/10/09 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
JS重载实现方法分析
2016/12/16 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python实现Decorator模式实例代码
2018/02/09 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Django中的session用法详解
2020/03/09 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
新闻学毕业生自荐信
2013/11/15 职场文书
成龙洗发水广告词
2014/03/14 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
林肯就职演讲稿
2014/05/19 职场文书
欢迎标语大全
2014/06/21 职场文书
大学生十八大感想
2015/08/11 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python