使用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+XML 操作
Sep 20 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
angular之ng-template模板加载
Nov 09 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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
长波有什么东西
2021/03/01 无线电
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
javascript折半查找详解
2015/01/26 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
javascript history对象详解
2017/02/09 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
青年教师培训方案
2014/02/06 职场文书
护士求职自荐信范文
2014/03/19 职场文书
地道战观后感500字
2015/06/04 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
高中信息技术教学反思
2016/02/16 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python