使用vue中的v-for遍历二维数组的方法
更新时间:2018年03月07日 14:33:49 作者:青丘耳畔
下面小编就为大家分享一篇使用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
}
]
]
结果:

以上这篇使用vue中的v-for遍历二维数组的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
这篇文章主要介绍了详解Vue Elementui中的Tag与页面其它元素相互交互的两三事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Vue全局自适应大小:使用postcss-pxtorem方式
本文介绍了如何在Vue项目中使用postcss-pxtorem插件实现响应式设计,postcss-pxtorem可以自动将CSS文件中的px单位转换为rem单位,从而实现更好的自适应布局,通过配置postcss-pxtorem插件,可以在构建时自动完成转换,无需手动修改代码2025-01-01
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
这篇文章主要介绍了Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,非常具有实用价值,需要的朋友可以参考下2017-10-10


最新评论