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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
ECMAScript6--解构
Mar 30 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 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
一个odbc连mssql分页的类
2006/10/09 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
JS实现留言板功能
2017/06/17 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
浅谈五大Python Web框架
2017/03/20 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python中的字符串内部换行方法
2018/07/19 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
python 数据类型强制转换的总结
2021/01/25 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
单身证明格式样本
2015/06/15 职场文书