在 Vue.js 中,
v-for
循環是每個項目都會使用的東西,它允許您在模闆代碼中編寫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
用于周遊數組或對象,但在某些情況下,我們肯定隻希望循環執行一定次數。
例如,假設我們正在為線上商店建立一個分頁系統,而我們隻希望每頁顯示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
條件以确定是否應渲染。是以,實際上,無論條件是什麼,您都将周遊數組的每個項目。
不要這樣:
// BAD CODE!
<ul>
<li
v-for='product in products'
:key='product._id'
v-if='product.price < 50'
>
{{ product.name }}
</li>
</ul>
複制
4.使用計算屬性或方法代替
為避免上述問題,我們應該在周遊模闆中的資料之前對其進行過濾。有兩種非常相似的方法:
- 使用計算屬性
- 使用過濾方法
讓我們快速地介紹一下這兩種方法。
首先,我們隻需要設定一個計算屬性,為了獲得與之前的v-if相同的功能,代碼應如下所示。
<ul>
<li v-for='products in productsUnderFifty' :key='product._id' >
{{ product.name }}
</li>
</ul>
// ...
<script>
export default {
data () {
return {
products: []
}
},
computed: {
productsUnderFifty: function () {
return this.products.filter(product => product.price < 50)
}
}
}
</script>
複制
下面的代碼幾乎相同,但是使用方法改變了我們通路模闆中的值的方式,如果我們希望能夠将變量傳遞給篩選器,那麼方法是最好的選擇。
<ul>
<li v-for='products in productsUnderPrice(50)' :key='product._id' >
{{ product.name }}
</li>
</ul>
// ...
<script>
export default {
data () {
return {
products: []
}
},
methods: {
productsUnderPrice (price) {
return this.products.filter(product => product.price < price)
}
}
}
</script>
複制
5.在循環中通路項目的索引
除了周遊數組和通路每個元素之外,我們還可以跟蹤每個項的索引。
為此,我們必須在項目後添加一個索引值,它非常簡單,可用于分頁,顯示清單索引,顯示排名等。
<ul>
<li v-for='(products, index) in products' :key='product._id' >
Product #{{ index }}: {{ product.name }}
</li>
</ul>
複制
6.周遊一個對象
到目前為止,我們隻真正看過使用
v-for
周遊數組,但是我們可以輕松地周遊對象的鍵值對。
與通路元素的索引類似,我們必須向循環中添加另一個值。如果我們用一個參數周遊一個對象,我們将周遊所有的項。
如果我們添加另一個參數,我們将獲得items 和 key,如果添加第三個,我們還可以通路
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
指令的最佳做法。
你還有什麼其他建議嗎?
本文首發于公衆号《前端外文精選》,關注後私信回複:大禮包,送某網精品視訊課程網盤資料,準能為你節省不少錢!
如果對你有所啟發和幫助,可以點個關注、收藏、轉發,也可以留言讨論,這是對作者的最大鼓勵。
作者簡介:Web前端工程師,全棧開發工程師、持續學習者。