技術標籤：javavuejavascriptelement經驗分享

【辰兮要努力】：hello你好我是辰兮，很高興你能來閱讀，暱稱是希望自己能不斷精進，向著優秀程式設計師前行！

部落格來源於專案以及程式設計中遇到的問題總結，偶爾會有讀書分享，我會陸續更新Java前端、後臺、資料庫、專案案例等相關知識點總結，感謝你的閱讀和關注，希望我的部落格能幫助到更多的人，分享獲取新知，大家一起進步!

吾等採石之人，應懷大教堂之心，願你們奔赴在各自的熱愛中…

前端經常會遇到遍歷一個list集合後，還要遍歷其中每一個物件的某一個特定的屬性，再迴圈顯示,分享簡單用法給初學者，希望對你有幫助！

業務場景：

items: [
        {
          id: 1,
          name: "辰兮",
          photos: [
            { img: "1.jpg" },
            { img: "2.jpg" },
            { img: "3.jpg" }
 
,
          ]
        },
         {
          id: 2,
          name: "chenxi",
          photos: [
            { img: "4.jpg" },
            { img: "5.jpg" }
          ]
        }
      ]
    };

原理是一樣的就是先遍歷大的集合，再遍歷每一個物件

    <!-- 注意： v-for 迴圈的時候，key 屬性只能使用 number獲取string --
 
>
    <!-- 注意： key 在使用的時候，必須使用 v-bind 屬性繫結的形式，指定 key 的值 -->
    <!-- 在元件中，使用v-for迴圈的時候，或者在一些特殊情況中，
                 如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字串/數字 型別 :key 值 -->
<div v-for="(item, key) in items" :key="key">
          <div>
            <div>
              <p>{{item.name}}</p>
            </div>
              <div v-for="(photo,index) in item.photos" :key="index">
                <span>{{photo.img}}</span>    
              </div>
          
          </div>
        </div>

補充：vue遍歷中的key講解

    <!-- 注意： key 在使用的時候，必須使用 v-bind 屬性繫結的形式，指定 key 的值 -->
    <!-- key使用案例如下 -->
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

key 的特殊屬性主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同型別元素的演算法。使用 key，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。

總結：key值的存在保證了唯一性，可以用於dom的重新渲染或是就地複用。

非常感謝你閱讀到這裡，如果這篇文章對你有幫助，希望能留下你的點贊