如下所示:
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嵌套輸出多層對象,分別輸出到個表的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答