使用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 event事件在IE、FF兼容性问题
Jan 01 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
微信小程序框架的页面布局代码
Aug 17 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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的配置文件php.ini
2006/10/09 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
详解Python中类的定义与使用
2017/04/11 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python SVD压缩图像的实现代码
2019/11/05 Python
最小二乘法及其python实现详解
2020/02/24 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python中取绝对值简单方法总结
2020/07/24 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
初中生学习生活的自我评价
2013/11/20 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python