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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python取代netcat过程分析
2018/02/10 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
银行求职信
2014/05/31 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL