• 技术文章 >web前端 >Vue.js

    vue.js怎么遍历二维数组

    VV2021-10-09 17:01:29原创153

    vue.js遍历二维数组的方法:【<table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'><tr v-for='(ite...】。

    本文操作环境:windows10系统、vue.js 2.9、thinkpad t480电脑。

    在vue中我们可以使用v-for遍历二维数组,具体实现代码如下所示:

    <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
        }
       ]
      ]

    结果:

    998dbbadfcb65ffd922a058d592de1a.png

    推荐学习:php培训

    以上就是vue.js怎么遍历二维数组的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue.js 二维数组
    上一篇:vue.js如何实现弹窗功能 下一篇:vue.js怎么隐藏或显示元素
    大前端线上培训班

    相关文章推荐

    • C语言中二维数组在内存中的存放顺序是什么• PHP数组学习之二维数组创建方法浅析• PHP数组学习之二维数组计算数组长度• JS数组学习之一维和二维数组的创建和访问

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网