使用vue中的v-for遍歷二維數(shù)組的方法
更新時間:2018年03月07日 14:33:49 作者:青丘耳畔
下面小編就為大家分享一篇使用vue中的v-for遍歷二維數(shù)組的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示:
<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數(shù)據(jù)為:
this.data = [
[
{
type: '',
name: '資產(chǎn)',
start: '期末余額',
end: '期初余額'
},
{
type: '',
name: '負債和所有者權(quán)益(或股東權(quán)益)',
start: '期末余額',
end: '期初余額'
}
],
[
{
type: '',
name: '資產(chǎn)',
start: 125000,
end: 12534567
},
{
type: '',
name: '負債',
start: 125000,
end: 12534567
}
],
[
{
type: '資產(chǎn)',
name: '貨幣資金',
start: 125000,
end: 12534567
},
{
type: '負債',
name: '應(yīng)付短期融資款',
start: 125000,
end: 12534567
}
],
[
{
type: '資產(chǎn)',
name: '其中:客戶存款',
start: 125000,
end: 12534567
},
{
type: '',
name: '所有者權(quán)益(或股東權(quán)益)',
start: 125000,
end: 12534567
}
],
[
{
type: '資產(chǎn)',
name: '',
start: '',
end: ''
},
{
type: '所有者權(quán)益(或股東權(quán)益',
name: '實收資本(或股本)',
start: 125000,
end: 12534567
}
],
[
{
type: '資產(chǎn)',
name: '資產(chǎn)總計',
start: 111,
end: 11
},
{
type: '所有者權(quán)益(或股東權(quán)益',
name: '資本公積',
start: 125000,
end: 12534567
}
]
]
結(jié)果:

以上這篇使用vue中的v-for遍歷二維數(shù)組的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?中使用?this?更新數(shù)據(jù)的一次問題記錄
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實例中聲明了一個數(shù)組屬性如?books: [],在異步請求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進行數(shù)據(jù)更新,感興趣的朋友跟隨小編一起看看吧2022-11-11
vue-router 實現(xiàn)導(dǎo)航守衛(wèi)(路由衛(wèi)士)的實例代碼
這篇文章主要介紹了vue-router 實現(xiàn)導(dǎo)航守衛(wèi)(路由衛(wèi)士)的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue全局自適應(yīng)大小:使用postcss-pxtorem方式
本文介紹了如何在Vue項目中使用postcss-pxtorem插件實現(xiàn)響應(yīng)式設(shè)計,postcss-pxtorem可以自動將CSS文件中的px單位轉(zhuǎn)換為rem單位,從而實現(xiàn)更好的自適應(yīng)布局,通過配置postcss-pxtorem插件,可以在構(gòu)建時自動完成轉(zhuǎn)換,無需手動修改代碼2025-01-01
詳解Webstorm 新建.vue文件支持高亮vue語法和es6語法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語法和es6語法,非常具有實用價值,需要的朋友可以參考下2017-10-10

