使用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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python实现最大子序和的方法示例
2019/07/05 Python
通过实例解析Python return运行原理
2020/03/04 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
项目专员岗位职责
2013/12/04 职场文书
农场厂长岗位职责
2013/12/28 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
婚宴主持词
2015/06/30 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS