cari

Rumah >hujung hadapan web >tutorial js >使用vue中的v-for遍历二维数组的方法

使用vue中的v-for遍历二维数组的方法

亚连
亚连asal
2018-05-31 17:35:015563semak imbas

下面我就为大家分享一篇使用vue中的v-for遍历二维数组的方法，具有很好的参考价值，希望对大家有所帮助。

如下所示：

<table cellpadding="0" cellspacing="0" class="clearfix bigTable" id=&#39;downloaddata&#39;>
   <tr v-for=&#39;(item, index) in data&#39;>
    <template v-for=&#39;items in item&#39;>
     <template v-for=&#39;(itemss, indexs) in items&#39; v-if=&#39;indexs !== "type"&#39;>
      <td>{{itemss}}</td>
     </template>
    </template>
   </tr>

其中，data数据为：

this.data = [
   [
    {
     type: &#39;&#39;,
     name: &#39;资产&#39;,
     start: &#39;期末余额&#39;,
     end: &#39;期初余额&#39;
    },
    {
     type: &#39;&#39;,
     name: &#39;负债和所有者权益(或股东权益）&#39;,
     start: &#39;期末余额&#39;,
     end: &#39;期初余额&#39;
    }
   ],
   [
    {
     type: &#39;&#39;,
     name: &#39;资产&#39;,
     start: 125000,
     end: 12534567
    },
    {
     type: &#39;&#39;,
     name: &#39;负债&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;货币资金&#39;,
     start: 125000,
     end: 12534567
    },
    {
     type: &#39;负债&#39;,
     name: &#39;应付短期融资款&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;其中：客户存款&#39;,
     start: 125000,
     end: 12534567
    },
    {
     type: &#39;&#39;,
     name: &#39;所有者权益（或股东权益)&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;&#39;,
     start: &#39;&#39;,
     end: &#39;&#39;
    },
    {
     type: &#39;所有者权益（或股东权益&#39;,
     name: &#39;实收资本（或股本）&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;资产总计&#39;,
     start: 111,
     end: 11
    },
    {
     type: &#39;所有者权益（或股东权益&#39;,
     name: &#39;资本公积&#39;,
     start: 125000,
     end: 12534567
    }
   ]
  ]

结果：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

基于Axios 常用的请求方法别名(详解)

Bootstrap 中data-[*] 属性的整理

vue2.0 根据状态值进行样式的改变展示方法

Atas ialah kandungan terperinci 使用vue中的v-for遍历二维数组的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Vue中v-for的数据分组实例Artikel seterusnya：JavaScript中使用import 和require打包后实现原理分析

Artikel berkaitan

Lihat lagi