使用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: '負(fù)債和所有者權(quán)益(或股東權(quán)益)',
start: '期末余額',
end: '期初余額'
}
],
[
{
type: '',
name: '資產(chǎn)',
start: 125000,
end: 12534567
},
{
type: '',
name: '負(fù)債',
start: 125000,
end: 12534567
}
],
[
{
type: '資產(chǎn)',
name: '貨幣資金',
start: 125000,
end: 12534567
},
{
type: '負(fù)債',
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: '實(shí)收資本(或股本)',
start: 125000,
end: 12534567
}
],
[
{
type: '資產(chǎn)',
name: '資產(chǎn)總計(jì)',
start: 111,
end: 11
},
{
type: '所有者權(quán)益(或股東權(quán)益',
name: '資本公積',
start: 125000,
end: 12534567
}
]
]
結(jié)果:

以上這篇使用vue中的v-for遍歷二維數(shù)組的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Vue?3.0?v-for中的Ref數(shù)組用法小結(jié)
- vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
- vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
- Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式小結(jié)
- vue計(jì)算屬性時(shí)v-for處理數(shù)組時(shí)遇到的一個(gè)bug問(wèn)題
- vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)
相關(guān)文章
vue?中使用?this?更新數(shù)據(jù)的一次問(wèn)題記錄
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如?books: [],在異步請(qǐng)求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(shù)據(jù)更新,感興趣的朋友跟隨小編一起看看吧2022-11-11
vue-router 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由衛(wèi)士)的實(shí)例代碼
這篇文章主要介紹了vue-router 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由衛(wèi)士)的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue.js使用watch監(jiān)聽(tīng)路由變化的方法
這篇文章主要介紹了vue.js使用watch監(jiān)聽(tīng)路由變化的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
詳解Vue Elementui中的Tag與頁(yè)面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁(yè)面其它元素相互交互的兩三事,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue全局自適應(yīng)大小:使用postcss-pxtorem方式
本文介紹了如何在Vue項(xiàng)目中使用postcss-pxtorem插件實(shí)現(xiàn)響應(yīng)式設(shè)計(jì),postcss-pxtorem可以自動(dòng)將CSS文件中的px單位轉(zhuǎn)換為rem單位,從而實(shí)現(xiàn)更好的自適應(yīng)布局,通過(guò)配置postcss-pxtorem插件,可以在構(gòu)建時(shí)自動(dòng)完成轉(zhuǎn)換,無(wú)需手動(dòng)修改代碼2025-01-01
Vue使用axios引起的后臺(tái)session不同操作
這篇文章主要介紹了Vue使用axios引起的后臺(tái)session不同操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
詳解Webstorm 新建.vue文件支持高亮vue語(yǔ)法和es6語(yǔ)法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語(yǔ)法和es6語(yǔ)法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10
Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02

