使用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 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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
用JavaScript显示随机图像或引用
2009/04/21 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
Python中enumerate函数代码解析
2017/10/31 Python
Python tkinter事件高级用法实例
2018/01/31 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python 解压pkl文件的方法
2018/10/25 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
flask实现验证码并验证功能
2019/12/05 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python如何调用java类
2020/07/05 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
EJB的激活机制
2013/10/25 面试题
《悯农》教学反思
2014/04/28 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers