欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

  • vue 3 中watch 和watchEffect 的新用法

    vue 3 中watch 和watchEffect 的新用法

    本篇文章主要通過 Options API 和 Composition API 對比 watch 的使用方法，讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦，希望對大家有所幫助
    2021-11-11
  • vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法

    vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法

    這篇文章主要介紹了vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-12-12
  • 使用Vue3和Pinia實現(xiàn)網(wǎng)頁刷新功能

    使用Vue3和Pinia實現(xiàn)網(wǎng)頁刷新功能

    在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應性至關重要,當用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來實現(xiàn)這一功能,需要的朋友可以參考下
    2024-08-08
  • element-ui tooltip修改背景顏色和箭頭顏色的實現(xiàn)

    element-ui tooltip修改背景顏色和箭頭顏色的實現(xiàn)

    這篇文章主要介紹了element-ui tooltip修改背景顏色和箭頭顏色的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • VUE使用docxtemplater導出word文檔實例(帶圖片)

    VUE使用docxtemplater導出word文檔實例(帶圖片)

    docxtemplate支持的功能很多,語法包含變量替換、條件判斷、循環(huán)、列表循環(huán)、表格循環(huán)等,下面這篇文章主要給大家介紹了關于VUE使用docxtemplater導出word功能(帶圖片)的相關資料,需要的朋友可以參考下
    2023-06-06
  • vue使用Echart線柱混合圖排坑記錄

    vue使用Echart線柱混合圖排坑記錄

    這篇文章主要為大家介紹了vue使用Echart線柱混合圖排坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • vue自定義組件實現(xiàn)v-model雙向綁定數(shù)據(jù)的實例代碼

    vue自定義組件實現(xiàn)v-model雙向綁定數(shù)據(jù)的實例代碼

    vue中父子組件通信,都是單項的,直接在子組件中修改prop傳的值vue也會給出一個警告,接下來就用一個小列子一步一步實現(xiàn)了vue自定義的組件實現(xiàn)v-model雙向綁定,需要的朋友可以參考下
    2021-10-10
  • vue登錄以及權(quán)限驗證相關的實現(xiàn)

    vue登錄以及權(quán)限驗證相關的實現(xiàn)

    這篇文章主要介紹了vue登錄以及權(quán)限驗證相關的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • Vue3如何在SCSS中使用v-bind

    Vue3如何在SCSS中使用v-bind

    這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過template先創(chuàng)建一個通用的頁面結(jié)構(gòu),本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • Vue中動畫與過渡的使用教程

    Vue中動畫與過渡的使用教程

    最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關于Vue中實現(xiàn)過渡動畫效果的相關資料,需要的朋友可以參考下
    2023-01-01

最新評論