使用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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
小议Javascript中的this指针
Mar 18 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
Element input树型下拉框的实现代码
Dec 21 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中文件上传的一个问题
2010/09/04 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
Javascript window对象详解
2014/11/12 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python mysql中in参数化说明
2020/06/05 Python
酷瑞网络科技面试题
2012/03/30 面试题
linux面试题参考答案(4)
2014/09/21 面试题
Linux的文件类型
2012/03/07 面试题
家电业务员岗位职责
2014/03/10 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
工作求职自荐信
2014/06/13 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
会议主持人开场白台词
2015/05/28 职场文书
紫日观后感
2015/06/05 职场文书
欠条格式范本
2015/07/03 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
python实现简单的三子棋游戏
2022/04/28 Python
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript