使用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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
js控制input输入字符解析
Dec 27 Javascript
javascript的函数作用域
Nov 12 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
react国际化react-intl的使用
May 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中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
pycharm远程调试openstack的图文教程
2017/11/21 Python
python决策树之C4.5算法详解
2017/12/20 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python实现抢购IPhone手机
2018/02/07 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
药学专业大学生自荐信
2013/09/28 职场文书
年度考核自我鉴定
2014/02/02 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
电力工程合作意向书
2015/05/11 职场文书
环保建议书作文400字
2015/09/14 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书