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

vue利用v-for嵌套輸出多層對(duì)象,分別輸出到個(gè)表的方法

 更新時(shí)間：2018年09月07日 15:30:35   作者：阿之阿佐  
今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對(duì)象,分別輸出到個(gè)表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

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è)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue 3 中watch 和watchEffect 的新用法

    vue 3 中watch 和watchEffect 的新用法

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

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

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

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

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

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

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

    VUE使用docxtemplater導(dǎo)出word文檔實(shí)例(帶圖片)

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

    vue使用Echart線(xiàn)柱混合圖排坑記錄

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

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

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

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

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

    Vue3如何在SCSS中使用v-bind

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

    Vue中動(dòng)畫(huà)與過(guò)渡的使用教程

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

最新評(píng)論