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

vue-for循環(huán)嵌套操作示例

 更新時(shí)間:2019年01月28日 11:17:57   作者:s_psycho  
這篇文章主要介紹了vue-for循環(huán)嵌套操作,結(jié)合實(shí)例形式分析了vue.js使用for循環(huán)嵌套讀取數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue-for循環(huán)嵌套操作。分享給大家供大家參考,具體如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
  </style>
</head>
<body>
<table id="app" border="1" cellspacing="0" cellpadding="0">
<tr>
  <td>父循環(huán)第幾次</td>
  <td>子循環(huán)第幾次</td>
  <td>json的第幾條數(shù)據(jù)</td>
  <td>數(shù)值</td></tr>
<tbody v-for="x,index in parentList">
<tr v-for="i,index2 in x.childList">
  <td>{{index}}</td>
  <td>{{index2}}</td>
  <td>{{i.index}}</td>
  <td>{{i.childName}}</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      parentList: [{
        childList: [{
          index: 1,
          childName: "第一個(gè)節(jié)點(diǎn)"
        }, {
          index: 2,
          childName: "第一個(gè)節(jié)點(diǎn)"
        }, {
          index: 3,
          childName: "第一個(gè)節(jié)點(diǎn)"
        }, {
          index: 4,
          childName: "第一個(gè)節(jié)點(diǎn)"
        }, {
          index: 5,
          childName: "第一個(gè)節(jié)點(diǎn)"
        }]
      },
        {
          childList: [{
            index: 6,
            childName: "第二個(gè)節(jié)點(diǎn)"
          }, {
            index: 7,
            childName: "第二個(gè)節(jié)點(diǎn)"
          }, {
            index: 8,
            childName: "第二個(gè)節(jié)點(diǎn)"
          }, {
            index: 9,
            childName: "第二個(gè)節(jié)點(diǎn)"
          }, {
            index: 10,
            childName: "第二個(gè)節(jié)點(diǎn)"
          }]
        },
        {
          childList: [{
            index: 11,
            childName: "第三個(gè)節(jié)點(diǎn)"
          }, {
            index: 12,
            childName: "第三個(gè)節(jié)點(diǎn)"
          }, {
            index: 13,
            childName: "第三個(gè)節(jié)點(diǎn)"
          }, {
            index: 14,
            childName: "第三個(gè)節(jié)點(diǎn)"
          }, {
            index: 15,
            childName: "第三個(gè)節(jié)點(diǎn)"
          }]
        }]
    }
  })
</script>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼,可得如下運(yùn)行結(jié)果:

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定

    Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定

    Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定,如何進(jìn)行綁定,如何進(jìn)行數(shù)據(jù)雙向綁定,感興趣的小伙伴們可以參考一下
    2016-09-09
  • vue-cli中使用高德地圖的方法示例

    vue-cli中使用高德地圖的方法示例

    這篇文章主要介紹了vue-cli中使用高德地圖的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽功能

    vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽功能

    這篇文章主要介紹了vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽,通過本文學(xué)習(xí)我們知道了pdfjs-dist 的工作原理是把獲取到的 pbf 的文件的數(shù)據(jù)流, 利用 canvas轉(zhuǎn)換成圖片,本文通過實(shí)例代碼詳解講解,需要的朋友可以參考下
    2022-10-10
  • Vue.js創(chuàng)建Calendar日歷效果

    Vue.js創(chuàng)建Calendar日歷效果

    這篇文章主要為大家詳細(xì)介紹了Vue.js創(chuàng)建Calendar日歷效果的過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • vue中配置scss全局變量的步驟

    vue中配置scss全局變量的步驟

    這篇文章主要介紹了vue中配置scss全局變量的步驟,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-12-12
  • Vue中v-html圖片過大導(dǎo)致溢出的問題及解決

    Vue中v-html圖片過大導(dǎo)致溢出的問題及解決

    這篇文章主要介紹了Vue中v-html圖片過大導(dǎo)致溢出的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue-loader教程介紹

    vue-loader教程介紹

    本篇文章主要介紹了vue-loader教程介紹,vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。有興趣的可以了解一下
    2017-06-06
  • Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制

    Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制

    本文主要介紹了Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • 解決vue中l(wèi)ess的使用問題

    解決vue中l(wèi)ess的使用問題

    這篇文章主要介紹了解決vue中l(wèi)ess的使用問題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-11-11
  • vue 子組件watch監(jiān)聽不到prop的解決

    vue 子組件watch監(jiān)聽不到prop的解決

    這篇文章主要介紹了vue 子組件watch監(jiān)聽不到prop的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評(píng)論