使用vue中的v-for遍历二维数组的方法


Posted in Javascript onMarch 07, 2018

如下所示:

<table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'>
   <tr v-for='(item, index) in data'>
    <template v-for='items in item'>
     <template v-for='(itemss, indexs) in items' v-if='indexs !== "type"'>
      <td>{{itemss}}</td>
     </template>
    </template>
   </tr>

其中,data数据为:

this.data = [
   [
    {
     type: '',
     name: '资产',
     start: '期末余额',
     end: '期初余额'
    },
    {
     type: '',
     name: '负债和所有者权益(或股东权益)',
     start: '期末余额',
     end: '期初余额'
    }
   ],
   [
    {
     type: '',
     name: '资产',
     start: 125000,
     end: 12534567
    },
    {
     type: '',
     name: '负债',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '货币资金',
     start: 125000,
     end: 12534567
    },
    {
     type: '负债',
     name: '应付短期融资款',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '其中:客户存款',
     start: 125000,
     end: 12534567
    },
    {
     type: '',
     name: '所有者权益(或股东权益)',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '',
     start: '',
     end: ''
    },
    {
     type: '所有者权益(或股东权益',
     name: '实收资本(或股本)',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '资产总计',
     start: 111,
     end: 11
    },
    {
     type: '所有者权益(或股东权益',
     name: '资本公积',
     start: 125000,
     end: 12534567
    }
   ]
  ]

结果:

使用vue中的v-for遍历二维数组的方法

以上这篇使用vue中的v-for遍历二维数组的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类 from qq
Nov 13 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
vue实现简单的日历效果
Sep 24 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 #Javascript
在vue项目中,使用axios跨域处理
Mar 07 #Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 #Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 #Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 #Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 #Javascript
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
文章推荐系统(三)
2006/10/09 PHP
我的论坛源代码(七)
2006/10/09 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php中curl使用指南
2015/02/05 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
python中实现延时回调普通函数示例代码
2017/09/08 Python
在python shell中运行python文件的实现
2019/12/21 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
运动会获奖感言
2014/02/11 职场文书
销售会计岗位职责
2014/03/15 职场文书
产假请假条
2014/04/10 职场文书
十八大宣传标语
2014/10/09 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
升学宴家长致辞
2015/07/27 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle