如下所示:
specifications:[
{
specificationName:"颜色",
specificationItem:[
{value:"黄色"},
{value:"黑色"}
]
}
]
<table class="table table-bordered table-hover table-item spggdytable"
id="ggxtable" v-show="isAddSpecifications">
<thead>
<tr>
<th>排序</th>
<th>规格项</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in specifications">
<td>{{index}}</td>
<td>{{item.specificationName}}</td>
<td>
<a href='#'> <img src="../img/common_edit@25.png" alt="修改"></a>
<a href='#'><img src="../img/common_del@25.png" alt="删除"></a>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover table-item spggdytable"
id="ggztable" v-show="isAddSpecifications">
<thead>
<tr>
<th>规格值</th>
<th>操作</th>
</tr>
</thead>
<tbody v-for="(item,index) in specifications">
<tr v-for="(part,n) in item.specificationItem">
<td>{{part.value}}</td>
<td>
<a href='#'> <img src="../img/common_edit@25.png" alt="修改"></a>
<a href='#'><img src="../img/common_del@25.png" alt="删除"></a>
</td>
</tr>
</tbody>
</table>

以上这篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
下一篇 :
tensorflow实现简单逻辑回归
-
阿里云服务器搭建一个网站网站建设的基本步骤——部署与发布新手入门
2026-05-18栏目: 教程
-
网络基础技术实践#网络安全基础技术实践课程
2026-05-18栏目: 教程
-
阿里云服务器计算网络增强型实例sn1ne 适合中大型网站及性能要求高的公司业务使用
2026-05-18栏目: 教程
-
前端进阶|第八天 京东笔试题,引用传参赋值无效?
2026-05-18栏目: 教程
-
阿里云弹性伸缩ESS必知必会
2026-05-18栏目: 教程
