使用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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP无限分类的类
2007/01/02 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
使用php计算排列组合的方法
2013/11/13 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript模拟命名空间
2015/04/17 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
详解参数传递四种形式
2015/07/21 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
解决Layui中layer报错的问题
2019/09/03 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Django保护敏感信息的方法示例
2019/05/09 Python
利用python开发app实战的方法
2019/07/09 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
酒店个人求职信范文
2014/01/25 职场文书
大学课外活动总结
2014/07/09 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
导游词之河北野三坡
2019/12/11 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Python实现照片卡通化
2021/12/06 Python