快捷導(dǎo)航

vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法

更新時間：2018年09月07日 15:30:35 作者：阿之阿佐

今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

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ī)格項</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嵌套輸出多層對象,分別輸出到個表的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue element實現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程詳解
這篇文章主要介紹了vue element實現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
Vue的異步渲染axios問題
這篇文章主要介紹了Vue的異步渲染axios問題，具有很好的參考價值，希望對大家有所幫助。
2023-03-03
Vue組件的實現(xiàn)原理詳細分析
在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue組件的實現(xiàn)原理,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2023-01-01
一文帶你吃透Vue3編譯原理
一直對編譯原理的東西都有一種恐懼感，感覺太難了，看不懂，打開vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔心，小編今天帶你一文吃透Vue3編譯原理
2023-02-02
Vue+Mock.js模擬登錄和表格的增刪改查功能
這篇文章主要介紹了Vue+Mock.js模擬登錄和表格的增刪改查功能,需要的朋友可以參考下
2018-07-07
vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案
在vuex的時候刷新以后里面存儲的state就會被瀏覽器釋放掉,因為我們的state都是存儲在內(nèi)存中的,所以一刷新頁面就會把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案,需要的朋友可以參考下
2021-07-07
前端vue+elementUI如何實現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實現(xiàn)記住密碼功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
vue打包并部署到nginx上的實現(xiàn)示例
本文主要介紹了vue打包并部署到nginx上的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-01-01
vue-quill-editor+plupload富文本編輯器實例詳解
這篇文章主要介紹了vue-quill-editor+plupload富文本編輯器實例詳解,需要的朋友可以參考下
2018-10-10
Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能
這篇文章主要介紹了Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04