使用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简化JavaScript开发分析
Feb 19 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
javascript字符串函数汇总
Dec 06 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue interceptor 使用教程实例详解
Sep 13 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
让python在hadoop上跑起来
2016/01/27 Python
Python定时器实例代码
2017/11/01 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
保安公司服务承诺书
2014/05/28 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
清明节主题班会
2015/08/14 职场文书
python如何获取网络数据
2021/04/11 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS