vue-for循环嵌套操作示例

更新时间：2019年01月28日 11:17:57 作者：s_psycho

这篇文章主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

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

您可能感兴趣的文章:

vue的基本用法与常见指令
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧
2017-08-08
VUE el-tree组件左边勾选，右边清除交互问题
这篇文章主要介绍了VUE el-tree组件左边勾选，右边清除交互问题，具有很好的参考价值，希望对大家有所帮助。
2023-04-04
vue多页面项目开发实战指南
一般我们的vue项目都是单页面的,其实因为vue在工程化开发的时候依赖了webpack,webpack帮我们将所有的资源整合到一起而形成一个单页面,下面这篇文章主要给大家介绍了关于vue多页面项目开发的相关资料,需要的朋友可以参考下
2022-01-01
vue自定义指令之面板拖拽的实现
这篇文章主要介绍了vue自定义指令之面板拖拽的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue3.0中sass全局的使用过程
这篇文章主要介绍了vue3.0中sass全局的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue实现路由跳转和嵌套
本篇文章主要介绍了Vue实现路由跳转和嵌套，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue中遇到的坑之变化检测问题（数组相关）
这篇文章主要介绍了vue中遇到的坑之变化检测问题（数组相关），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Vue Router添加全局$router属性的示例详解
这篇文章主要介绍了Vue-Router-添加全局$router属性,在 Vue 中有一个 mixin 方法，这个方法会在每个组件创建之前被调用，我们可以在这个方法中将 VueRouter 实例挂载到 Vue 实例上，本文给大家介绍的非常详细，需要的朋友可以参考下
2023-11-11
详解Vuex管理登录状态
这篇文章主要介绍了详解Vuex管理登录状态,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
Vue 之孙组件向爷组件通信的实现
这篇文章主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04