今天小编就为大家分享一篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
specifications:[ { specificationName:"颜色", specificationItem:[ {value:"黄色"}, {value:"黑色"} ] } ]
<table 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='https://www.jb51.net/img/common_edit@25.png' alt='修改'></a> <a href='#'><img src='https://www.jb51.net/img/common_del@25.png' alt='删除'></a> </td> </tr> </tbody> </table> <table 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='https://www.jb51.net/img/common_edit@25.png' alt='修改'></a> <a href='#'><img src='https://www.jb51.net/img/common_del@25.png' alt='删除'></a> </td> </tr> </tbody> </table>
以上这篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: