編寫 Vue v-for 迴圈的 7 種方式
目錄
- 1. 始終在v-for迴圈中使用key
- 2. 在一定範圍內使用v-for迴圈
- 3. 避免在迴圈中使用v-if
- 4. 使用computed屬性或方法
- 5. 或者在迴圈外包一層元素
- 6. 訪問迴圈中的索引
- 7. 迭代物件
這在碰到諸如以下情況時特別好用：
- 渲染陣列或列表
- 遍歷物件屬性
在中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迴圈的資料。
雖然看上去直觀了，但這會導致一個巨大的效能問題——Vue
這意味著元件將遍歷每個元素，然後再檢查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屬性 - 使用過jAwtqOEF濾方法
隨你選擇，下面讓我們快速介紹這兩個方法。
首先，我們只需要設定一個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>
這有什http://www.cppcns.com麼問題？
和之前一樣。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' :keywww.cppcns.com='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 迴圈的 7 種方式的文章就介紹到這了,更多相關 Vue v-for 迴圈的 方式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！