使用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代码
Dec 09 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
swiper实现导航滚动效果
Dec 13 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
jQuery的ready方法详解
2014/11/27 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python实现选择排序
2017/06/04 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
社区八一活动方案
2014/02/03 职场文书
善意的谎言事例
2014/02/15 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
2014年店长工作总结
2014/11/17 职场文书
初中信息技术教学计划
2015/01/22 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
手残删除python之后的补救方法
2021/06/26 Python
MySQL学习之基础操作总结
2022/03/19 MySQL
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL