使用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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
小程序富文本提取图片可放大缩小
May 26 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
请离开include_once和require_once
2013/07/18 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python os.fork() 循环输出方法
2019/08/08 Python
培训协议书范本
2014/04/22 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
商品陈列协议书
2014/09/29 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Python机器学习之逻辑回归
2021/05/11 Python