如下所示:
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>規(guī)格項(xiàng)</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>規(guī)格值</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嵌套輸出多層對(duì)象,分別輸出到個(gè)表的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注