使用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操作label给label赋值及取label的值示例
Nov 07 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 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
10 个经典PHP函数
2013/10/17 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python with的用法
2014/08/22 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python无序链表删除重复项的方法
2020/01/17 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python实现AdaBoost算法的示例
2020/10/03 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
《月光曲》教学反思
2016/02/16 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
mysql如何配置白名单访问
2021/06/30 MySQL
spring boot中nativeQuery的用法
2021/07/26 Java/Android