溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了Vue.js如何編寫更好的v-for循環，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
在VueJS中，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.js如何編寫更好的v-for循環有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
