使用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初学者的编写开发的七个细节
Jan 11 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
基于jquery的表格排序
2010/09/11 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
深入解读Python解析XML的几种方式
2016/02/16 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
华为python面试题
2016/05/03 面试题
设计总监岗位职责
2013/12/07 职场文书
出国留学担保书
2014/05/20 职场文书
法律专业求职信
2014/05/24 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL