編寫Vue?v-for循環的方式有哪些

這篇文章主要講解了“編寫Vue v-for循環的方式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“編寫Vue v-for循環的方式有哪些”吧！

這在碰到諸如以下情況時特別好用：

• 渲染數組或列表

• 遍歷對象屬性
  

在Vue中v-for循環最基本的用法是這樣的：

<ul>
  <li v-for='product in products'>
    {{ product.name }}
  </li>
</ul>

但是，在本文中，我們將介紹一些超棒的方法，可以使你的v-for代碼更加精確、可預測和高效。

讓我們開始吧。

1. 始終在v-for循環中使用key

首先，我們討論的是大多數Vue開發人員已經知道的常見最佳實踐——在v-for循環中使用:key。通過設置唯一的鍵屬性，可以確保組件按期望的方式工作。

如果我們不使用:key，Vue將使DOM盡可能高效。這可能會導致v-for元素出現亂序或其他不可預測的行為。

如果我們對每個元素都有唯一的鍵引用，那么就可以更好地預測如何操縱DOM。

<ul>
  <li 
    v-for='product in products'
    :key='product._id'  
  >
    {{ product.name }}
  </li>
</ul>

2. 在一定范圍內使用v-for循環

雖然大多數時候v-for用于循環數組或對象，但也有我們只想迭代特定次數的情況。

例如，假設我們正在為在線商店創建分頁系統，并且我們只想每頁顯示10個產品。使用變量來跟蹤當前頁碼，就可以像這樣處理分頁。

<ul>
  <li v-for='index in 10' :key='index'>
    {{ products[page * 10 + index] }}
  </li>
</ul>

3. 避免在循環中使用v-if

一個超常見的錯誤是使用v-if來過濾v-for循環的數據。

雖然看上去直觀了，但這會導致一個巨大的性能問題——VueJS將優先v-for于v-if指令。

這意味著組件將遍歷每個元素，然后再檢查v-if條件以查看是否應該呈現。

如果你將v-if與v-for一起使用，無論條件是什么，都將遍歷數組的每一項。

// 不好的做法!
<ul>
  <li 
    v-for='product in products' 
    :key='product._id' 
    v-if='product.onSale'
  >
    {{ product.name }}
  </li>
</ul>

那么問題是什么？

假設products數組有數千個項，但想要渲染的只有3個在售產品。

每次重新渲染時，即使出售的3種產品根本沒有改變，Vue也必須遍歷這數千個項。

必須盡量避免結合使用v-if與v-for的情況。

接下來介紹兩個替代方法。

4. 使用computed屬性或方法

為了避免上述問題，我們應該在模板中進行迭代之前過濾數據。有兩種非常相似的方法可以做到：

• 使用computed屬性

• 使用過濾方法
  

隨你選擇，下面讓我們快速介紹這兩個方法。

首先，我們只需要設置一個computed屬性。為了獲得與之前的v-if相同的功能，代碼看起來像這樣。

<template>
  <ul>
    <li v-for="products in productsOnSale" :key="product._id">
      {{ product.name }}
    </li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        products: []
      }
    },
    computed: {
      productsOnSale: function () {
        return this.products.filter(product => product.onSale)
      }
    }
  }
</script>

這樣的好處是：

• 數據屬性只會在依賴項發生變化時重新評估

• 模板只遍歷在售的產品，而不是每一個產品
  

使用過濾方法的代碼幾乎相同，但使用方法會改變訪問模板內值的方式。但是，如果我們希望能夠將變量傳遞給過濾過程，那么就應該選擇方法這條路。

<template>
  <ul>
    <li v-for="products in productsOnSale(50))" :key="product._id">
      {{ product.name }}
    </li>
  </ul>
</template>

<script>
  export default {
   data () {
    return {
     products: []
    }
   },
   methods: {
    productsOnSale (maxPrice) {
     return this.products.filter(product => product.onSale && product.price < maxPrice)
    }
   }
  }
</script>

5. 或者在循環外包一層元素

在決定是否完全渲染列表時，你可能還是想要將v-for與v-if結合起來。

例如，如果我們只想在用戶登錄時呈現產品列表怎么辦。

錯誤代碼：

<ul>
  <li 
    v-for='product in products' 
    :key='product._id' 
    v-if='isLoggedIn' <!-- HERE -->
  >
    {{ product.name }}
  </li>
</ul>

這有什么問題？

和之前一樣。Vue模板會優先考慮v-for——所以會遍歷每個元素并檢查v-if。

即使最后什么都不渲染，也會循環數千個元素。

對于此示例，有一個簡單的解決方案是移動v-if語句。

更好的代碼！

<ul v-if='isLoggedIn'> <!-- Much better -->
  <li 
    v-for='product in products' 
    :key='product._id' 
  >
    {{ product.name }}
  </li>
</ul>

這要好得多，因為如果isLoggedIn為false——那就根本不需要迭代。

6. 訪問循環中的索引

除了遍歷數組并訪問每個元素之外，我們還可以跟蹤每個項目的索引。

為此，我們需要在項目之后添加一個索引值。這樣做超級簡單，但對于分頁、顯示列表索引、顯示排名等都很有用。

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    Product #{{ index }}: {{ product.name }}
  </li>
</ul>

7. 迭代對象

到目前為止，我們只研究了使用v-for來遍歷數組。但是我們也可以很輕松地學會迭代對象的鍵值對。

與訪問元素的索引類似，我們需要向循環中添加另一個值。如果我們使用單個參數循環對象，我們將循環所有項。

如果我們添加另一個參數，則將獲得項和鍵。如果我們添加第三個參數，則還可以訪問v-for循環的索引。

假設我們想遍歷產品中的每個屬性。那么代碼如下：

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    <span v-for='(item, key, index) in product' :key='key'>
      {{ item }}
    </span>
  </li>
</ul>

感謝各位的閱讀，以上就是“編寫Vue v-for循環的方式有哪些”的內容了，經過本文的學習后，相信大家對編寫Vue v-for循環的方式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！