使用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中的常见排序算法
Mar 27 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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
Terran魔法科技
2020/03/14 星际争霸
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
操作Oracle的php类
2006/10/09 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
js活用事件触发对象动作
2008/08/10 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
Python中enumerate函数代码解析
2017/10/31 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python实现两个文件夹的同步
2019/08/29 Python
python实现FTP循环上传文件
2020/03/20 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
后备干部培训方案
2014/05/22 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
MySQL数据库之存储过程 procedure
2022/06/16 MySQL